点击 Angular Material's Card 内的按钮会触发卡片本身的点击事件

Question

我有一个mat-card内部组件模板：

<mat-card *ngFor="let p of products" (click)="viewProduct(p)">
    <mat-card-actions>
        <button mat-stroked-button (click)="addProductToCart(p)">Add to cart</button>
    </mat-card-actions>
</mat-card>

问题是，当单击按钮 angular 时，会同时调用addProductToCart和viewProduct。

我怎样才能防止这种情况？

Answer 1

您可以使用event.stopPropagation()方法停止冒泡点击事件：

这是它在 Angular 中的样子：

<button ... (click)="addProductToCart(p); $event.stopPropagation()">Add to cart</button>