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

Question

我想让一个子元素触发它自己的点击，而不响应它具有 [routerLink] 的父元素，问题是子元素可以't 运行它 delete() 在 (click)="delete()" 中运行它只是在 [routerLink] 中跟随它的父级（它导航到 /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 但它仍然执行相同的行为

Answer 1

如果你在 delete 函数中停止传播（），事件将不会冒泡到带有 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();
}

Answer 2

在您的情况下，仅指定 stopPropagation 的 child 有时可能不起作用。特别是当 child 和 parent 都有各自的 "routerLinks" 定义时

我建议在组件中使用 "navigate" 方法处理路由，最后返回 "false"。这将阻止 parent 路由在 child.

的点击处理程序完成后触发

// 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();
    this.route.navigate(['child/route/here']);
    return false;
}

从点击处理程序返回 false 阻止 parent 路由为我工作。

Answer 3

只有event.stopPropagation();，对我没用。我所要做的就是也加入 e.preventDefault();

// In your HTML   
<a [routerLink]="['/product/'+product.id]">
     <!-- your other inner stuff -->
     <a (click)="delete($event)" ><i class="red trash outline icon"></i></a>
</a>

// In your component
delete(e){
    e.stopPropagation();
    e.preventDefault();
}

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

How to not apply [routerLink] on a child element?

angular-routing

angular

angular-router