有关角度内按钮范围的混乱

Question

组件一个实例中的

(click)

事件正在触发另一实例中的函数。我不知道如何解释这一点。我附上了一个 stackblitz 示例。

单击两个按钮会打印相同的

id

，即使不同的

id

已传递给它们的实例。理想情况下，单击第一个按钮应打印

1

，第二个按钮应打印

2

Answer 1

问题是你真的总是点击第一个按钮

您的按钮上有一个标签。所以，实际上您点击的是标签，而不是按钮。您的标签有

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>

A stackblitz

注意：如果这个“解决方法”看起来很奇怪，那么它是相同的材料角度使用，例如在单选按钮中（您可以在github中看到）