通过Angular 2获取本机元素相对于视口的位置

Question

我正在使用 @ViewChild 访问我的模板中的原生 DOM 元素。我想弄清楚这个元素在视口中的位置。

this.myElement.nativeElement.???

我相信我需要在这里获取一些数据点来解决这个问题。

我可以通过以下方式获取视口的高度：

window.innerHeight

但是我很困惑如何使用 Angular 找到 myElement 相对于所述视口的位置。

Answer 1

使用getBoundingClientRect

constructor(private ele: ElementRef<HTMLElement>)
{

}

// scrolls an element into view if it's too close to the top of the screen
scrollIntoView() 
{
      var bounds = this.ele.nativeElement.getBoundingClientRect();

      if (bounds.top < 50)
      {
          window.scrollBy(0, -50 + bounds.top );
      }
}