如何为绑定了routerLink的li元素内的子元素禁用路由跳转

问题本质 #

该问题由事件冒泡导致：点击label子元素时，click事件会向上传播到绑定了routerLink的父级li元素，触发路由跳转逻辑。

实现方法 #

直接在两个label内部的图标点击事件中，添加阻止事件冒泡的逻辑即可，无需改动其他原有代码：

1. 编辑按钮对应的label点击事件修改为：

<label for="item2"><i class="icon gray right-align icon-Edit large" (click)="$event.stopPropagation(); rename(2)"></i></label>

2. 确认按钮对应的label点击事件修改为：

<label for="item2"><i class="icon gray right-align icon-OK large" (click)="$event.stopPropagation(); rename(0)"></i></label>

补充说明 #

如果页面内有多个同类需要阻止父级routerLink触发的子元素，可以封装一个自定义指令统一处理阻止冒泡逻辑，避免重复写$event.stopPropagation()。

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