单击按钮时覆盖 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()更多信息。

Answer 2

我希望我所有的 Post DIV 都链接到 Post-Detail 页面，但我也有一个滑块（想想像 Instagram 这样有箭头的东西，用户也可以用手指滑动它）所以我的解决方案是把整个使用 routerLink 将 div 放入 a 标签，并将滑块放入带有 href="javascript:void(0);" 的 a 标签中和一个 (click)="$event.stopPropagation()" 组件 Html 代码是这样的：

<a [routerLink]="['/profile','feed-detail',postItem.uniqueCode]">
   <div class="content-wrap" [ngClass]="{'is-hidden': showComments}">
       ...
        <a href="javascript:void(0);" (click)="$event.stopPropagation()">
            <app-carousel>
                ...
            <app-carousel>
        </a><!-- closing the javascript:void(0) a tag-->
   </div> <!-- closing the content-wrap div-->
</a> <!-- closing the routerLink a tag-->