angular - Angular 的 Renderer2.listen() 可以有多个目标吗？

Question

出于性能原因，我在 Angular 的 ngZone 中手动添加和删除了 DOM 元素上的事件监听器。我的实现看起来不错，我目前正在尝试重构代码以使其保持干燥且更具可读性。现在，我的问题是是否有办法将多个 DOM 元素传递给Renderer2.listen()函数。所以基本上我想做这样的事情：

this._unlisten['mouseup'] = this._renderer.listen(
   this.elementView.nativeElement, // <- Can I pass more elements than just elementView?
   'mouseup',
   (event) => {
       unlistenToTheEventOnSeveralElements(event)
   }
)

提前感谢您的任何想法或建议。

Answer 1

来自Angular 文档：

监听事件的上下文。可以是整个窗口或文档、文档的正文或特定的 DOM 元素。

如果您需要监听多个被点击的元素，您应该使用 rxjs fromEvent并将所有事件与merge 合并，如下所示：

merge(fromEvent(firstElement, 'click'), fromEvent(secondElement, 'click'))
  .pipe(takeUntil(/* destroy subject */)
  .subscribe(event => unlistenToTheEventOnSeveralElements(event))

这是示例应用程序，因此您可以看到它的实际效果：stackblitz