子要素に[routerLink]を適用しない方法は？

Question

子要素をクリックしても自分自身をクリックして反応させないようにするには、[routerLink]、の親要素は子要素は実行できません(click)="delete()"の関数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> 

私が上divに[routerLink]を移動しようとしましたが、あなたの関数delete（中stopPropgation場合、それはまだ同じ行動

Answer 1

をやって）イベントはアンカータグwまでバブルしません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(); 
}