如何使用 RxJs 传输 HostListener 事件？

Question

我找到了大量关于如何绑定 Angular HostListeners 的资源：

@HostListener('document:click', ['$event'])
handleClick(event: Event) {
     // etc
}

但我该如何使用 RxJs 来传输它呢？

documentClickedStream = Observable.fromEvent(/* how to bind this? */)

不确定如何使用 Angular 文档中建议的装饰器模式绑定以创建“单击任意位置”流。

Answer 1

我想简单的方法就是使用中间主题：

  @HostListener('document:click', ['$event'])
  onKeyUp(e:Event) {
      this.clickStream$.next(e);
  }

然后像平常一样sub到它

  this.clickStream$
      .asObservable()
      .pipe(
          // some operators...
      )
      .subscribe();

Answer 2

使用模板引用来获取按钮的引用

它会起作用，因为我们的目标是文档。

@ViewChild('btn') btn:ElementRef;
documentClickedStream = Observable.fromEvent(window['document'],'click');