Angular问题：服务触发的按钮点击事件被多次执行

问题核心原因 #

你遇到的onButtonClick()多次执行，本质是组件重复创建订阅但未及时销毁。比如组件被路由跳转后返回、通过ngIf等条件反复渲染，每次组件初始化都会新增一个订阅，之前的订阅因为没清理依然生效，导致Subject触发时所有订阅都会执行一次。

解决方法 #

1. 组件销毁时手动取消订阅 #

在组件的ngOnDestroy生命周期钩子中，手动调用订阅对象的unsubscribe()方法，清理订阅：

subscription: Subscription;

ngOnInit() {
  this.subscription = this.dataservice.buttonClicked$.subscribe(() => {
    this.onButtonClick();
  });
}

ngOnDestroy() {
  // 可选链避免空值报错
  this.subscription?.unsubscribe();
}

2. 使用async管道自动管理订阅 #

Angular的async管道会自动帮你处理订阅的创建与销毁，无需手动管理：
首先在组件类中把Observable暴露出来，结合tap操作符触发方法：

import { tap } from 'rxjs/operators';

buttonClicked$ = this.dataservice.buttonClicked$.pipe(
  tap(() => this.onButtonClick())
);

然后在模板中使用async管道（只要模板渲染，管道就会维持订阅，组件销毁时自动清理）：

<!-- 用ng-container承载管道，避免额外DOM元素 -->
<ng-container *ngIf="buttonClicked$ | async"></ng-container>

3. 用takeUntil统一管理多订阅 #

如果组件中有多个订阅，推荐用takeUntil操作符统一管理销毁逻辑，避免维护多个订阅变量：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.dataservice.buttonClicked$
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => this.onButtonClick());
}

ngOnDestroy() {
  // 通知所有订阅终止
  this.destroy$.next();
  this.destroy$.complete();
}

排查小技巧 #

可以在订阅回调里加日志，确认重复订阅的数量：

this.dataservice.buttonClicked$.subscribe(() => {
  console.log('订阅执行');
  this.onButtonClick();
});

每次点击按钮时，看控制台打印的日志条数，就能知道当前存在多少个活跃订阅。

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