Angular 2+ 使用 HostListener 或 window.pageYOffset 滚动？答案

【问题标题】：Angular 2+ scroll with HostListener or window.pageYOffset?Angular 2+ 使用 HostListener 或 window.pageYOffset 滚动？
【发布时间】：2021-06-01 15:24:36
【问题描述】：

为了获得更好的性能，我应该在 Angular 2+ 中使用哪种语法？为什么在通过 onscroll 窗口事件和 pageYOffset 很容易获得滚动位置时使用 HostListener？

@HostListener('window:scroll', ['$event']) onWindowScroll($event) { 
  this.scrollPosition = $event.target.children[0].scrollTop;
  console.log("scrollPosition:" + this.scrollPosition)
};

ngAfterViewInit(){
  window.onscroll = function() {
     var currentScrollPos = window.pageYOffset;
     console.log("current:" + currentScrollPos);
  }
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

非常简单，一种情况是在组件上添加一些装饰器属性 (@HostListener)，另一方面是直接将事件绑定到窗口。

当它们所属的组件被销毁时，主机侦听器被销毁，因此无需删除事件或取消订阅它，它会在组件被销毁时自行处理。
将事件附加到窗口，即使组件被销毁，事件仍然存在，它不会自动取消订阅。

这是我们与主机监听器一起拥有的公平和干净的优势之一（更高性能的代码）。您可以查看更多

HostListener

【讨论】：