angular - 单击按钮时覆盖 routerLink

Question

我正在制作一个电子商务网站，我的目标是每个对象有多个输入点，例如，他们单击/点击卡片上除按钮以外的任何地方，它将在单击/时转到产品详细信息/点击按钮会将该项目添加到购物车。

目前我转发到详情没有问题，即使点击按钮它也会转发到详情。我想让按钮的操作覆盖路由器。

这是我目前的尝试:

<a *ngFor="let item of list"  >
<div class="col-lg-3 col-md-4 col-xs-6">
    <div class="card" [routerLink]="['/detail', item.item_number]">
    <img style ="width:170px;height:150px; display:block;"alt="170x150" src="{{item.item_image}}">

    <div class="card-block">
    <p class="card-text text-muted">{{item.item_name}}</p>
    <p class="card-text">Size:{{item.item_length}}</p>
    </div>

    <div class="container">        
    <button type="button" class="btn btn-primary btn-block" (click)="addItem()">Add<span [routerLink]="['/detail', item.item_number]" [class.disabled]="disabled ? true : null"></span></button>
    </div>
</div>
</div>
</a>

我希望在按钮中嵌套禁用命令会起作用，但情况似乎并非如此。任何想法都会很棒!

Answer 1

将 stopPropagation() 添加到按钮的点击事件应该可以解决问题:

<button type="button" class="btn btn-primary btn-block" 
(click)="addItem();$event.stopPropagation()">Add<span [routerLink]="['/detail', item.item_number]" 
[class.disabled]="disabled ? true : null"></span></button>

这可以防止当前事件在捕获和冒泡阶段进一步传播。阅读有关 stopPropagation() 的更多信息 here .