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

Question

For better performance, which syntax shoul'd i use in Angular 2+? Why use HostListener when is easy to get the scroll position with onscroll window event and pageYOffset?

 @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

It very simple, in one case you are adding some decorator property ( @HostListener ) on the component, on the other hand you are binding event directly to the window.

1. Host listeners are destroyed when the component they belong to is destroyed, so no need to remove the event or unsubscribe it, it will be taken care by angular it self while component gets destroy.

2. Attaching event to window, even component get destroyed, the event still there, it doesn't get unsubscribe automatically.

That's one of the fair and clean advantage(more performant code) we have with host listener. You can check more on

HostListener