Angular 的 @HostBinding( 'window：resize' ) 和 Rxjs fromEvent( window， 'resize') 之间的区别

Question

我只是想知道使用一个而不是另一个有什么好处。

@HostListener( 'window:resize' )
doSomething(): void {
// ...throttle with setTimeout and clearTimeout maybe...
}

和

fromEvent( window, 'resize' ).pipe(
// ... debounceTime, takeUntil etc.
).subscribe( () => {
doSomething();
})

这真的只是上下文的问题(例如，通过使用pipe()更容易处理事件流)，还是可观察对象更"现代"，或者根本不重要?

谢谢!

Answer 1

fromEvent将为您提供更大的执行和管道内衬灵活性，以及在NgZone上下文之外绑定的可能性。

@Hostlistener有一个优点，你不必在事件被触发后手动触发变化检测。当您的组件使用OnPush变更检测策略(这是建议的(但不是默认的)策略)时，您确实需要使用Observables。在使用fromEvent时，还有其他情况需要这样做，但这些都是非常极端的情况。

HostListener的另一个优点是，当组件销毁时，您不需要取消订阅，因为这是自动完成的。

所以，主要是关于偏好和上下文。

_ad有第三方库(我的)在那里扩展HostListener和模板事件绑定的东西与debounce和其他很酷的功能。