问题描述
我想让一个子元素触发自己的点击,甚至不响应具有[routerLink]的父元素,问题是该子元素无法运行<(click)="delete()"
中的c0>函数,它紧随[routerLink]
中的父元素(它导航到/product/:id)
I want to make a child element to trigger it own click even , and don't respond to it parent element having [routerLink], the problem is the child element can't run it delete()
function in (click)="delete()"
it just follow it parent in [routerLink]
(it navigate to /product/: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
,但它仍具有相同的行为
I tried to move [routerLink]
to an upper div
but it still doing the same behavior
推荐答案
如果您在delete function()中使用stopPropgation,则该事件不会通过routerLink冒泡到锚标记上.
if you stopPropgation in the delete function() the event won't bubble up to the anchor tag with the 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();
}
这篇关于如何不在子元素上应用[routerLink]?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!