Javascript 如何使用RxJs流式传输HostListener事件？

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

但是我如何使用RxJs来流式传输呢

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

---

不确定如何使用Angular docs中建议的decorator模式绑定创建“click anywhere”流。

使用模板ref获取按钮的ref

它将工作，因为我们的目标文件

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

---

工作示例：

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

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

然后像平常一样去做

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

---

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

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

---

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

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

然后将此代码放入组件构造函数或ngOnInit中

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

---

你到底想完成什么？您希望应用程序中的其他组件在单击该组件时通过ngrx得到通知吗？或者？你们可以指向decorator文档链接吗？哎呀，更新的问题，我的意思是如何用RxJs而不是ngrx处理主机元素上的任意点击。我输入得太快了。如果没有按钮，即整个HostElement，我如何执行此操作？如果单击dom中的任何位置，是否要触发此操作？是否检查文档：从事件中单击内部我不确定我是否可以直接访问文档，因为这是一个Nativescript项目，但我可以尝试。不可以，因为我们正在尝试选择文档

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