Angular 2+ 使用 HostListener 或 window.pageYOffset 滾動？

Question

為了獲得更好的性能，我應該在 Angular 2+ 中使用哪種語法？ 為什么在很容易獲得帶有 onscroll window 事件和 pageYOffset 的滾動 position 時使用 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); } }

Answer 1

它非常簡單，在一種情況下，您在組件上添加一些裝飾器屬性（ @HostListener ），另一方面，您將事件直接綁定到 window。

1. 主機監聽器在其所屬的組件被銷毀時被銷毀，因此無需刪除事件或取消訂閱它，它會在組件被銷毀時由 angular 自行處理。

2. 將事件附加到 window，即使組件被破壞，事件仍然存在，它不會自動取消訂閱。

這是我們與主機偵聽器一起擁有的公平和干凈的優勢之一（更高性能的代碼）。 您可以查看更多

主機監聽器