Angular 2：获取 HTML 元素的位置

Question

我正在尝试在 Angular 2 中实现自定义指令以移动任意 HTML 元素。到目前为止，一切正常，除了我现在不知道如何在单击它并想开始移动时获取 HTML 元素的初始位置。我使用这两个主机绑定绑定到我的 HTML 元素的 top 和 left 样式：

 /** current Y position of the native element. */
@HostBinding('style.top.px') public positionTop: number;

/** current X position of the native element. */
@HostBinding('style.left.px') protected positionLeft: number;

问题是它们都是 undefined 开头。我只能更新也会更新 HTML 元素的值，但我无法读取它？应该是这样吗？如果是，我有什么替代方法来检索 HTML 元素的当前位置。

原文由 tzwickl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<div (click)="move()">xxx</div>

 // get the host element
constructor(elRef:ElementRef) {}

move(ref: ElementRef) {
  console.log(this.elRef.nativeElement.offsetLeft);
}

另见 https://stackoverflow.com/a/39149560/217408

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议