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

routerLink

关注

发信

关注(28)粉丝(399)

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

本文介绍了如何不在子元素上应用 [routerLink]?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让一个子元素触发它自己的点击，并且不响应它具有[routerLink]的父元素，问题是子元素无法运行它<(click)="delete()" 中的 code>delete() 函数，它只是在 [routerLink] 中跟随它的父级(它导航到/product/:id)

 
<!-- 父元素--><a [routerLink]="['/product/'+product.id]"><div class="人物"><div class="sides"><div class="side"><div class="card"><img class="img" [src]="product.thumb"><div class="内容"><div class="header">{{product.name}}</div><div class="meta"><span>product.category</span>

<div class="extraContent"><a (click)="delete()" ></a>

</a>

我试图将 [routerLink] 移动到上面的 div 但它仍然做同样的行为

解决方案

如果你在 delete function() 中 stopPropgation 事件不会冒泡到带有 routerLink 的锚标签

//将事件对象传递给删除函数<a (click)="delete($event)" ><i class="红色垃圾桶轮廓图标"></i></a>//在删除函数中，停止事件传播删除(事件){event.stopPropagation();}

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>

I tried to move [routerLink] to an upper div but it still doing the same behavior

解决方案

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]?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-10 19:44