如何在Angular rxjs中使用fromEvent监听多个元素的点击事件？

有两种实现思路，均不会修改原有按钮的点击逻辑，仅新增独立的监听逻辑：

方案1：基于你现有@ViewChild的写法修正 #

你现有代码的核心问题是事件名写错（原生点击事件是click不是clicked）、没有合并多个按钮的监听流，修正后代码如下：
首先导入所需rxjs方法：

import { fromEvent, merge } from 'rxjs';

然后修改ngAfterViewInit逻辑：

ngAfterViewInit(): void {
  // 合并所有需要监听的按钮的点击流
  const buttonClick$ = merge(
    fromEvent(this.BUTTON_EDIT.nativeElement, 'click'),
    fromEvent(this.BUTTON_ADD.nativeElement, 'click')
  );

  buttonClick$.subscribe((event: MouseEvent) => {
    // 拿到点击的按钮ID
    const clickButton = event.currentTarget as HTMLElement;
    const buttonId = clickButton.id;
    // 此处编写你的追踪上报逻辑
    console.log('用户点击按钮，ID为：', buttonId);
  });
}

方案2：批量监听（适合按钮数量多/动态生成的场景） #

不需要逐个写@ViewChild，给所有需要追踪的按钮加统一的标记即可：

1. 模板中给按钮加统一属性标记，比如track-btn：

<button id="BUTTON_EDIT" track-btn (click)="原有的编辑方法()">编辑</button>
<button id="BUTTON_ADD" track-btn (click)="原有的新增方法()">新增</button>
<!-- 其他需要追踪的按钮都加track-btn属性 -->

2. 组件中用@ViewChildren批量查询所有带标记的按钮：

import { ViewChildren, QueryList } from '@angular/core';
import { fromEvent, merge } from 'rxjs';

export class AppComponent  {
  @ViewChildren('trackBtn', {read: ElementRef}) trackButtons: QueryList<ElementRef>;
    
  ngAfterViewInit(): void {
    // 批量生成所有按钮的点击流并合并
    const clickStreams = this.trackButtons.map(ele => fromEvent(ele.nativeElement, 'click'));
    const buttonClick$ = merge(...clickStreams);

    buttonClick$.subscribe((event: MouseEvent) => {
      const buttonId = (event.currentTarget as HTMLElement).id;
      // 追踪逻辑
    });

    // 如果是动态渲染的按钮，监听列表变化后重新绑定即可
    this.trackButtons.changes.subscribe(() => {
      // 重新生成点击流绑定逻辑
    });
  }
}

注意事项 #

• 订阅的点击流需要在组件销毁时取消订阅，避免内存泄漏，可以配合takeUntil操作符实现。
• 如果按钮内部嵌套了子元素，用event.currentTarget获取绑定事件的按钮元素，比event.target更稳定。

内容的提问来源于stack exchange，提问作者Vincent Mach