引导卡双击区域 - 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()。点击button时有什么方法可以拨打TEST2()吗？

Answer 1

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

把你的模板改成这个，注意$event参数被传递：

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

在你的组件中：

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