防止从特定子元素触发 routerlink答案

【问题标题】：Prevent routerlink being triggered from specific child elements防止从特定子元素触发 routerlink
【发布时间】：2023-01-17 06:40:05
【问题描述】：

我有类似的东西：

<ion-item
        *ngFor="let recipe of recipes"
        [routerLink]="['./',recipe.id]"
      >
        <ion-avatar><ion-img [src]="recipe.imageURL"></ion-img></ion-avatar>
        <ion-label>{{ recipe.name }}</ion-label>
        <ion-button
          (click)="deleteRecipe(recipe.id)"
          color="danger"
          ><ion-icon name="trash-outline"></ion-icon
        ></ion-button>
      </ion-item>

每当我点击与图像、文本和删除按钮（以及离子项目中的所有空白）一致的项目时，我们都会被重定向到详细信息页面。我想知道是否可以在单击删除按钮时覆盖我们停留在同一页面上的导航？

【问题讨论】：

标签： angular ionic-framework angular-routerlink

【解决方案1】：

实际上你需要在你调用的方法上返回 false。这将防止 routerlink 被触发。

【讨论】：

【解决方案2】：

您需要在按钮上使用 stopPropagation() 事件方法。 https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

【讨论】：