如何不在子元素上应用 [routerLink]？

Question

我想创建一个子元素来触发它自己的点击，并且不响应具有 [routerLink] 的父元素，问题是子元素无法delete()在其中运行它的功能(click)="delete()"，只需跟随它的父元素[routerLink]（它导航到/产品/：id）

    <div class="item">

<!-- parent element -->
    <a [routerLink]="['/product/'+product.id]">
        <div class="figure">
          <div class="sides">
            <div class="side">
              <div class="card">
<img class="img" [src]="product.thumb"> 
                <div class="content">
                  <div class="header">{{product.name}}</div>
                  <div class="meta"> <span>product.category</span> </div>
                </div>
                <div class="extraContent"> <span class="ui right floated black">

                <!-- child element -->
                <a (click)="delete()" ><i class="red trash outline icon"></i></a></span> <span><i class="deleteProductIcon"></i></span> </div> 
                <!-- child element -->

              </div>
            </div>
          </div>
        </div>
      </a>
<!-- parent element -->

</div>

我尝试移动[routerLink]到鞋面div，但它仍然做同样的行为

Answer 1

如果您在删除函数（）中停止Propgation，该事件将不会冒泡到带有routerLink的锚标记

// pass in the event object to the delete function
<a (click)="delete($event)" ><i class="red trash outline icon"></i></a>

// in the delete function, stop event propagation
delete(event){
    event.stopPropagation();
}