组件的一个实例中的(click)事件会触发另一个实例中的功能.我不知道如何解释这一点.我附上了一个stackblitz个例子.
单击这两个按钮都会打印相同的id，即使已将不同的id传递给其实例.理想情况下，点击第一个按钮应打印1，第二个按钮应打印2
组件的一个实例中的(click)事件会触发另一个实例中的功能.我不知道如何解释这一点.我附上了一个stackblitz个例子.
单击这两个按钮都会打印相同的id，即使已将不同的id传递给其实例.理想情况下，点击第一个按钮应打印1，第二个按钮应打印2
问题是您总是点击really次第一个按钮
您的按钮上有一个标签.所以，实际上您点击的是标签，而不是按钮.您的标签有for="my_btn"，两个按钮的"id"都是my_btn
如果您删除按钮的类"bTN"并单击"标签"，您就可以看到我到底在说什么.
您可以在您的component.ts(组件外部)中声明一个变量uniqueId，以及一个组件唯一id的变量
let nextUniqueId = 0; //<--see that it's outside the component.
//It's a variable of the "document"
@Component({
selector: 'app-mybutton',
standalone: true,
templateUrl: './mybutton.component.html',
styleUrl: './mybutton.component.css',
})
export class MybuttonComponent {
@Input() id:number
uniqueId='btn'+nextUniqueId++ //<--give a property uniqueId of the component
//and incremente la variable document.nextUniqueId
constructor(){
}
func() {
console.log(this.id);
}
}
在您的.html"绑定到.ts的uniqueId中
<button class="btn" [id]="uniqueId" (click)="func()">mybutton</button>
<label [for]="uniqueId" class="label">label_btn</label>
♪至stackblitz♪
注:如果这个"变通方法"看起来很奇怪，那么它是相同的material Angular 使用，例如在Radio按钮中(您可以在github中看到)