Angular中EventEmitter单次触发却多次执行订阅回调的问题

问题根源 #

你误用了Angular的EventEmitter——它是专门为组件的@Output()装饰器设计的，绝对不应该用在服务里做跨组件通信。它的内部实现机制会导致订阅重复累积，哪怕你只调用一次emitValidation，也会触发多次订阅回调。

解决方案 #

1. 用RxJS Subject替换EventEmitter

服务里改用RxJS的Subject（如果需要给新订阅者发送当前最新值，就用BehaviorSubject），这是Angular服务跨组件通信的标准做法：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 必须加这个，确保服务是全局单例
})
export class CustomService {
  // 内部用Subject管理事件流
  private isValidationSubject = new Subject<any>();
  // 对外暴露只读的可观察对象，防止外部随意发送事件
  isValidation$ = this.isValidationSubject.asObservable();

  emitValidation(data: any) {
    this.isValidationSubject.next(data); // 用next()替代原有的emit()
  }
}

2. 组件订阅逻辑保持（但确认销毁时机）

你的组件订阅和销毁代码本身没问题，但要确保组件在销毁时确实执行了ngOnDestroy（比如路由组件不要用路由复用策略导致销毁逻辑不触发）：

import { Subscription } from 'rxjs';
// ...其他必要导入

export class TargetComponent {
  subVar: Subscription;

  constructor(private customService: CustomService) {}

  ngOnInit() {
    this.subVar = this.customService.isValidation$
      .subscribe(data => {
        // 这里的操作逻辑现在只会执行一次
      });
  }

  ngOnDestroy() {
    this.subVar?.unsubscribe(); // 用可选链简化判断逻辑
  }
}

3. 确保服务是真正的单例

如果之前的服务没有加providedIn: 'root'，而是在多个模块的providers数组里声明过，会导致服务被多次实例化，每个实例的事件流相互独立，也会出现多次触发的问题。所以一定要保留@Injectable里的providedIn: 'root'配置。

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