如何使用RxJ传输HostListener事件？

Question

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

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

但是我将如何使用RxJs进行流传输？

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

不确定如何使用Angular文档中建议的装饰器模式进行绑定以创建“随处单击”流。

Answer 1

这是我的工作示例。 首先，您需要将此行导入到组件中

import { fromEvent } from 'rxjs/internal/observable/fromEvent';

然后将这段代码放入您的组件构造函数或ngOnInit

   fromEvent(document, 'click').subscribe(event => {
      console.log(event);
    })

Answer 2

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

由于我们将文档定位为目标，因此它将起作用。

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

工作示例：https://stackblitz.com/edit/rxjs-window

Answer 3

我想最简单的方法是只使用一个中间主题：

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

然后像平常一样订阅它

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

Answer 4

您还可以使用以下给定的代码订阅RxJs事件，将以下给定的代码添加到ngOnInit事件：

this.subscribe(fromEvent(document, 'visibilitychange'), (e: Event) => {
    console.log('visibilitychange');
    this.getVisibilitychange(true);
});