时间戳

首页 > 解决方案 > Angular 的 @HostBinding( 'window:resize' ) 和 Rxjs' fromEvent( window, 'resize' ) 之间的区别

angular - Angular 的 @HostBinding( 'window:resize' ) 和 Rxjs' fromEvent( window, 'resize' ) 之间的区别

问题描述

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

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

和

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

这真的只是一个上下文问题（例如，使用 pipe() 更容易处理事件流），还是可观察的更“现代”，或者根本不重要？

谢谢！

标签： angularobservablesettimeout

解决方案

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

有@Hostlistener一个优势，您不必在触发事件后手动触发更改检测。Observables当您的组件使用更改检测策略时，您确实需要这样做OnPush，这是建议的（但不是默认的）策略。在其他情况下，您需要在使用 时执行此操作fromEvent，但这些都是非常边缘的情况。

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

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

广告 那里有第三方库（我的），它们HostListener通过 debounce 和其他很酷的功能扩展了模板事件绑定的东西。

推荐阅读