Angular中通过Service的EventEmitter推送对象到数组出现重复问题

常见触发原因 #

你遇到的重复问题通常由两类原因导致：

1. 订阅未及时销毁：组件多次初始化（例如路由来回切换）时，每次初始化都会新增一条订阅，旧订阅没有被清理，单次事件触发会执行多次回调，重复推送相同数据
2. 无去重逻辑：每次emit的数组中包含已存在于本地数组的元素，直接无脑push导致重复

排查步骤 #

• 在subscribe回调中添加console.log('触发订阅')，触发emit时查看日志打印次数，如果打印次数和你进入对应组件的次数一致，即可确认是订阅未销毁的问题
• 打印每次emit接收到的ingredients数组，和当前本地的ingredients数组做对比，确认是否存在数据本身重复的情况

解决方案 #

1. 修复订阅未销毁问题 #

推荐使用RxJS的takeUntil操作符实现组件销毁时自动取消订阅，代码示例：

// 导入依赖
import { Subject, takeUntil } from 'rxjs';

// 组件内定义销毁信号
private destroy$ = new Subject<void>();

ngOnInit() {
  this.slservice.toshoppinglist.pipe(
    takeUntil(this.destroy$)
  ).subscribe((ingredients: Ingredient[]) => {
    // 后续数据处理逻辑
  })
}

ngOnDestroy() {
  // 组件销毁时发送信号，终止所有关联订阅
  this.destroy$.next();
  this.destroy$.complete();
}

你也可以直接使用Angular的async管道绑定可观察对象，框架会自动管理订阅的生命周期，无需手动处理销毁。

2. 新增去重逻辑 #

每次推送前校验元素是否已存在，推荐用食材的唯一id作为判断标识，还可以根据业务需求增加已存在元素的数量更新逻辑，代码示例：

this.slservice.toshoppinglist.subscribe(
  (ingredients: Ingredient[]) => {
    for (let item of ingredients) {
      // 查找当前数组中是否已存在相同id的元素
      const existedItem = this.ingredients.find(i => i.id === item.id);
      if (!existedItem) {
        this.ingredients.push(item);
      } else {
        // 业务逻辑示例：已存在则叠加数量
        existedItem.amount += item.amount;
      }
    }
  }
)

额外优化建议 #

Angular官方不建议在Service中使用EventEmitter，它是专门为组件@Output场景设计的，跨组件通信推荐使用RxJS的Subject或BehaviorSubject，替换成本很低：
将service中的定义
toshoppinglist = new EventEmitter<Ingredient[]>()
修改为
toshoppinglist = new Subject<Ingredient[]>()
原来的emit方法替换为next方法即可，订阅逻辑不需要修改。

另外注意检查你的类型定义，代码中同时出现了Ingredient和Ingredients两种类型，确认是否是拼写错误，避免引发其他类型问题。

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