如何为Angular中的一组按钮设置事件绑定？

Question

有没有办法将同一个事件绑定到多个按钮或按钮组？（而不是单独绑定它们）例如考虑只有两个按钮，

<div class="btn-toolbar">
    <button type="button" class="btn btn-primary">Button 1</button>
    <button type="button" class="btn btn-primary">Button 2</button>
</div>

我想为这两个按钮绑定一个点击事件，这样当点击其中一个按钮时，将调用相同的函数。

Answer 1

每个 html 元素作为自己的侦听器。

因此，您需要单独绑定每个元素：

<div class="btn-toolbar">
    <button type="button" class="btn btn-primary" (click)="methodOne()">Button 1</button>
    <button type="button" class="btn btn-primary" (click)="methodOne()">Button 2</button>
</div>

您可以尝试通过为要绑定的元素创建容器并在其中添加绑定来绕过此问题，如下所示：

<div class="btn-toolbar">
    <div (click)="methodOne()">
        <button type="button" class="btn btn-primary">Button 1</button>
        <button type="button" class="btn btn-primary">Button 2</button>
    </div>
</div>

这种方法的问题是两个按钮之间的任何空白 space 也会触发 methodOne()。

Answer 2

您可以将按钮放在 *ngFor 中。例如，如果您想要 5 个按钮，则

在您的 html 模板中

<div class="btn-toolbar" *ngFor="let button of buttonArray; index as i">
    <button [id]="'button'+i" type="button" class="btn btn-primary" (click)="yourClickMethod()">Button {{i}}</button>
  
</div>

在你的ts文件中

buttonArray = new Array(5);// here give the number as per the number of buttons your require

如何为Angular中的一组按钮设置事件绑定？

How to set event binding for group of buttons in Angular?

event-binding

angular