Angular 2：获取 HTML 元素的位置答案

【问题标题】：Angular 2: Get position of HTML elementAngular 2：获取 HTML 元素的位置
【发布时间】：2017-07-23 09:27:29
【问题描述】：

我正在尝试在 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 元素的当前位置。

【问题讨论】：

标签： html angular angular2-hostbinding

【解决方案1】：

您可以使用两种方式

// html

<div id="section" ></div>

// 第一步

@ViewChild('section', { static: false }) public section?: ElementRef;

this.section.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });

// 第二步

document.getElementById("section").scrollIntoView({ behavior: "smooth", block: "center" });

【讨论】：

【解决方案2】：

在typeScript中你可以得到如下位置：

@ViewChild('ElementRefName') element: ElementRef;

const {x, y} = this.element.nativeElement.getBoundingClientRect();

【讨论】：

当浏览器不是 100% 大小时，此解决方案将不起作用
当浏览器不是 100% 大小时会发生什么？

【解决方案3】：

在 html 中：

<div (click)="getPosition($event)">xxx</div>

在打字稿中：

getPosition(event){
    let offsetLeft = 0;
    let offsetTop = 0;

    let el = event.srcElement;

    while(el){
        offsetLeft += el.offsetLeft;
        offsetTop += el.offsetTop;
        el = el.parentElement;
    }
    return { offsetTop:offsetTop , offsetLeft:offsetLeft }
}

【讨论】：

现在在 Angular 应用程序中测试它，它给出了奇数值（非常高的数字）。我不相信孩子的偏移量是它所有父母偏移量的简单聚合。我相信正确的属性是 offsetParent。
@Rohan 是的，我使用的是 offsetParent 而不是 parentElement，它似乎正在工作。

【解决方案4】：

<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

【讨论】：

但是偏移量没有给我元素的相对位置？
你的问题没有提到“相对”。 offsetLeft 只是一个例子。其余部分与纯 JavaScript 相同，这就是我在答案中添加链接的原因。
一个 sn-p 代码 + 一个指向另一个答案的链接（只有一个 sn-p 代码和一个链接）不应该被投票，我认为。
此解决方案不起作用。单击 mat-toolbar 中的按钮，返回工具栏的元素而不是按钮。见stackoverflow.com/questions/36006894/…
@MarcoAltieri 感谢您的投票。我看不出您的评论与我的回答有何关联。