引导卡双击区域-Angular 5

Question

我正在尝试创建一个Bootstrap card，它能够调用我的两个方法。

<div (click)="TEST1()" class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <button (click)="(TEST2)">TEST2BUTTON</button>
  </div>
</div>

尽管如此，实际上，在我单击它的地方，它总是会调用TEST1()。单击TEST2()时是否可以调用button？

Answer 1

您必须在事件回调中使用stopPropagation()。

将模板更改为此，请注意已传递$event参数：

 <button (click)="onClick2($event)">TEST2BUTTON</button>

以及您的组件中

onClick2(event: MouseEvent): void {
  event.stopPropagation();
}