如何阻止Ionic中特定子元素触发routerLink导航

当然可以实现！问题的核心是事件冒泡机制：当你点击删除按钮时，这个点击事件会沿着DOM树向上传递，最终触发父元素ion-item上的routerLink导航行为。我们只需要阻止这个事件冒泡，就能让点击删除按钮时停留在当前页面。

下面提供两种简单可行的方案：

方案一：模板内直接阻止事件冒泡 #

直接在按钮的click事件中添加$event.stopPropagation()，阻止事件向上传递到ion-item：

<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); $event.stopPropagation()" color="danger" >
    <ion-icon name="trash-outline"></ion-icon >
  </ion-button>
</ion-item>

原理说明 #

$event.stopPropagation()会中断当前事件的冒泡流程，这样ion-item就不会接收到这个点击事件，自然不会触发routerLink的导航跳转。

方案二：在组件方法中处理事件冒泡 #

如果你的删除逻辑比较复杂，更推荐把事件处理放在组件代码中，保持模板简洁：

1. 先修改模板，把$event传递给删除方法：

<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, $event)" color="danger" >
    <ion-icon name="trash-outline"></ion-icon >
  </ion-button>
</ion-item>

2. 在组件的TypeScript文件中，先阻止事件冒泡再执行删除逻辑：

deleteRecipe(recipeId: number, event: Event): void {
  // 先阻止事件冒泡，避免触发ion-item的导航
  event.stopPropagation();
  
  // 执行你的删除业务逻辑
  // 示例：
  // this.recipeService.deleteRecipe(recipeId).subscribe(() => {
  //   this.recipes = this.recipes.filter(r => r.id !== recipeId);
  // });
}

额外提示 #

确保你的deleteRecipe方法本身没有包含任何导航相关的代码，否则即使阻止了事件冒泡，页面还是可能会跳转哦~

内容的提问来源于stack exchange，提问作者Adam Jones