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

Question

我发现了许多关于如何绑定Angular HostListeners的资源：

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

但是我该如何使用RxJs来流式处理呢？

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

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

- FlavorScape

---

你实际想要达到什么目的？你希望在单击此组件时，应用程序中的其他组件通过ngrx获得通知吗？还是？ - dee zg

请问您能提供装饰器文档链接吗？ - Wand Maker

抱歉，更新一下问题，我真正想问的是如何使用 RxJs 处理 Host 元素上的任何点击事件，而不是 ngrx。我打字太快了。 - FlavorScape

Answer 1

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

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

然后像通常一样订阅它。

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

- FlavorScape

Answer 2

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

由于我们的目标是文档，所以这将起作用。

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

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

- Chellappan வ

---

如何在没有按钮的情况下完成这个操作，即整个HostElement？ - FlavorScape

你想在dom中的任何位置点击时触发这个吗？ - Chellappan வ

你有检查过事件中的document:click吗？ - Chellappan வ

我不确定能否直接访问文档，因为这是一个Nativescript项目，但我可以尝试一下。 - FlavorScape

不行，因为我们正在尝试选择文档。 - Chellappan வ

无法在Nativescript中使用（没有文档）。找不到变量：document，但在Web中可以工作。这就是为什么我认为访问Angular中的HostElement需要通过装饰器进行访问。 - FlavorScape

Answer 3

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

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

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

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

- Ashot Aleqsanyan

---

但这会破坏 SSR 渲染。使用 @HostListener 是安全的。 要使您的代码在 Angular Universal 上正常工作，应使用 DOCUMENT 注入令牌从 DI 中注入文档对象并使用它代替全局文档对象。 - Adam Kaczmarek

不确定在注入文档的情况下是否会破坏 SSR。 - Ashot Aleqsanyan

Answer 4

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

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

- Dilip Nannaware