如何在Angular中更改块的位置？答案

【问题标题】：How to change position of block in Angular?如何在Angular中更改块的位置？
【发布时间】：2018-08-21 19:46:42
【问题描述】：

我在页面上有div 元素：

<div #draggable></div>

@ViewChild('draggable') private draggableElement: ElementRef;

我监听滚动事件并尝试改变这个块的位置：

@HostListener('window:scroll', ['$event']) onScrollEvent($event){
    this.draggableElement.nativeElement.clientTop = 200;
  }

但它不起作用！

【问题讨论】：

标签： angular

【解决方案1】：

如果元素有绝对位置，可以设置left和top样式属性：

this.draggableElement.nativeElement.style.left = "100px";
this.draggableElement.nativeElement.style.top = "200px";

另一种方法是使用 CSS 变换来移动它：

this.draggableElement.nativeElement.style.transform = "translateX(100px)";
this.draggableElement.nativeElement.style.transform = "translateY(200px)";
this.draggableElement.nativeElement.style.transform = "translate(100px, 200px)";

【讨论】：

谢谢，如何从$event获取窗口坐标？
你可以看看this question。
This post 提供了各种技术来获取元素的位置（如果这就是您所说的“窗口”）。您还可以检索元素的left 和top 样式属性的当前值。
而this stackblitz 使用window.scrollX 和window.scrollY 来获取滚动位置。