Angular点击事件传递元素属性/绑定值的正确实现方案咨询

1. 直接传递绑定的数据源（最优解） #

Angular是数据驱动框架，没必要绕DOM属性，直接把绑定的item.id或整个item对象传给点击事件即可：

传递单个属性 #

<item class="item" [attr.data-itemid]="item.id" (click)="clickItem(item.id)"> item1 </item>

对应TypeScript代码：

clickItem(itemId: number | string): void {
  console.log(itemId); // 直接拿到id值，无需操作DOM
}

传递整个对象 #

如果需要使用item的其他属性，直接传完整对象：

<item class="item" [attr.data-itemid]="item.id" (click)="clickItem(item)"> item1 </item>

对应TypeScript代码：

// 先定义item的类型（可选，增强类型校验）
interface YourItemType {
  id: number | string;
  // 其他属性...
}

clickItem(item: YourItemType): void {
  console.log(item.id);
  console.log(item); // 拿到完整的item对象
}

2. 获取绑定事件的DOM元素本身 #

如果确实需要操作触发事件的父元素（而非实际点击的子元素），用$event.currentTarget代替$event.target——currentTarget始终指向绑定了点击事件的元素：

<item class="item" [attr.data-itemid]="item.id" (click)="clickItem($event)"> item1 </item>

对应TypeScript代码：

clickItem(event: Event): void {
  const targetElement = event.currentTarget as HTMLElement;
  const itemId = targetElement.getAttribute('data-itemid');
  console.log(itemId);
}

原有代码失效原因 #

• (click)="clickItem(attr.data-itemid)"：模板表达式无法直接引用attr.data-itemid，只能访问组件类属性或模板变量
• (click)="clickItem(this.id)"：模板中的this指向组件实例，而非DOM元素，所以this.id是组件类的属性，不是DOM元素的id

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