通过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 );
      }
}