Angular组件按钮作用域异常：实例(click)事件触发其他实例函数

问题诊断 #

你遇到的问题是组件实例的状态被意外共享，导致所有实例复用同一个id值。核心原因通常是组件类中错误地将id定义为静态属性，或者使用了组件外部的共享变量，而非组件实例独有的属性。

修复步骤 #

1. 修正组件属性定义
   确保组件的id是实例属性（去掉static关键字），每个组件实例都会拥有独立的属性副本：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="printId()">点击打印ID</button>`
})
export class MyComponent {
  @Input() id!: number; // 实例属性，每个组件实例独立持有

  printId() {
    console.log(this.id); // this指向当前组件实例，获取对应id
  }
}

2. 确认模板事件绑定
   模板中的点击事件要绑定到组件实例的方法，避免引用外部共享函数：

<!-- 父组件模板中正确传入不同id -->
<app-my-component [id]="1"></app-my-component>
<app-my-component [id]="2"></app-my-component>

验证效果 #

修改后，点击第一个组件的按钮会打印1，点击第二个组件的按钮会打印2，每个组件实例的状态不再串扰。

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