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

【问题标题】：Difference Between Angular's @HostBinding( 'window:resize' ) And Rxjs' fromEvent( window, 'resize' )Angular 的 @HostBinding( 'window:resize' ) 和 Rxjs' fromEvent( window, 'resize' ) 之间的区别
【发布时间】：2021-05-07 19:30:17
【问题描述】：

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

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

和

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

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

谢谢！

【问题讨论】：

这个问题主要是自以为是。与HostListener 装饰器相比，IMO 主观上，fromEvent 提供了更强大的事件处理方式。此外，HostListener 是特定于 Angular 的，而 fromEvent 理论上可以包含在任何使用 RxJS 的 JS 应用程序中。请参阅here 进行快速比较。
@MichaelD 你知道，这有一个密切的原因......

标签： angular observable settimeout

【解决方案1】：

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

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

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

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

_广告有第三方 libraries（我的）扩展了 HostListener 和模板事件绑定的东西，具有去抖动和其他很酷的功能。

【讨论】：

感谢您分享您的图书馆。很高兴知道它