Angular中两个相同子组件点击第二个时deleteItem执行两次求助

问题场景 #

页面中存在两个独立的<app-child>子组件，代码如下：

<app-child [model]="model1" (onDelete)="deleteForModel1($event)">
</app-child>

<app-child [model]="model2" (onDelete)="deleteForModel2($event)">
</app-child>

子组件内部的deleteItem方法实现：

deleteItem(id: number): void{
  if(confirm('Do you want to delete this item?')){
    //...
    this.onDelete.emit(id);
  }
}

点击第一个子组件的删除按钮时功能正常，但点击第二个子组件的删除按钮时，deleteItem方法会执行两次，疑问：是否Angular未识别这是两个独立的子组件？

问题原因及解决方案 #

Angular能正确识别这两个独立的子组件，出现重复执行的问题和组件实例无关，常见原因及解决方法如下：

• 事件绑定重复注册：检查子组件模板里的删除按钮，是否不小心写了两次(click)="deleteItem(id)"，或是通过Renderer2等方式重复绑定了点击事件。
• 变更检测触发重复执行：如果子组件用的是默认的Default变更检测策略，某些场景下可能导致方法被意外调用。可以尝试将子组件的变更检测策略改为OnPush，减少不必要的检测：

  import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class ChildComponent {
    @Input() model: any;
    @Output() onDelete = new EventEmitter<number>();
  
    deleteItem(id: number): void{
      if(confirm('Do you want to delete this item?')){
        //...
        this.onDelete.emit(id);
      }
    }
  }
  

• 父组件方法或数据问题：检查父组件的deleteForModel2方法，是否内部有重复逻辑，或是不小心把同一个方法绑定到了多个事件上。另外确认model2是否在变更时导致子组件重复渲染，进而引发事件重复绑定。
• 第三方依赖干扰：如果子组件用了第三方表格组件或自定义指令，可能存在事件冒泡或重复触发的问题，可以先移除第三方依赖测试，排查是否是外部因素导致。

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