Angular中点击按钮时function(this.id)无法正常工作的问题

在Angular模板中，(click)绑定的上下文是组件实例而非DOM元素，所以你用this.id时，this指向的是组件类，根本拿不到按钮的id。

给你两种可行的解决方式：

方式一：利用事件对象的currentTarget #

currentTarget始终指向绑定点击事件的按钮本身，能避免点击子元素（比如里面的<i>标签）时获取到错误的id：

<button (click)="changeEnergy($event.currentTarget.id)" id="flash" [ngClass]="!theme?'btnEnergy1':'btnEnergy2'">
        <i id="flashIcon" class="fa-solid fa-bolt iconFlash"></i>
</button>

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

给按钮定义一个模板引用变量，直接通过变量获取id：

<button #energyBtn (click)="changeEnergy(energyBtn.id)" id="flash" [ngClass]="!theme?'btnEnergy1':'btnEnergy2'">
        <i id="flashIcon" class="fa-solid fa-bolt iconFlash"></i>
</button>

两种方法都能动态获取按钮当前的id，无需手动写死，完全适配id变化的场景。

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