Angular中HTML元素ID无法通过this.id传递至函数问题求助

在Angular模板的点击事件绑定里，this指向的是组件类实例，而非触发事件的DOM元素，所以(click)="nextGeneral(this.id)"无法获取到按钮的ID值。下面是几种可行的解决方式：

方式一：直接传递组件绑定的ID变量（推荐） #

如果按钮的ID是通过组件变量动态生成的，直接将该变量传入函数即可，无需操作DOM：

<!-- 假设组件类中定义了 btnId 变量 -->
<button [id]="btnId" class="btn" (click)="nextGeneral(btnId)">next</button>

// 组件类中
btnId: number = 1; // 动态变化的ID值

nextGeneral(id: number){
  alert(id);
}

方式二：通过$event获取DOM元素ID #

利用事件对象$event获取触发点击的元素，进而拿到ID：

<button id="btnNext" class="btn" (click)="nextGeneral($event)">next</button>

nextGeneral(event: MouseEvent){
  // 类型断言确保目标元素是按钮
  const btnElement = event.target as HTMLButtonElement;
  // 将ID字符串转为数字（根据实际需求处理）
  const id = parseInt(btnElement.id, 10);
  alert(id);
}

方式三：使用模板引用变量 #

给按钮添加模板引用变量，直接通过变量获取ID：

<button #nextBtn id="btnNext" class="btn" (click)="nextGeneral(nextBtn.id)">next</button>

nextGeneral(id: string){
  // 转为数字类型
  const idNum = parseInt(id, 10);
  alert(idNum);
}

注意：DOM元素的ID本质是字符串类型，如果你需要数字类型，记得做类型转换并处理转换失败的情况（比如ID不是纯数字的场景）。

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