Angular 12子路由点击后自动跳转回父路由问题排查

DevOps 小满

2026-9-30

问题根因

故障是点击子路由链接时，点击事件冒泡到外层绑定了routerLink="data"的<mat-expansion-panel>组件，触发了两次路由导航：第一次是子路由跳转，第二次是父级面板跳转到/data的路由，两次导航冲突导致后一次覆盖前一次，因此出现短暂加载子组件后跳回父路由的情况。日志输出的NavigationCancel - navigation id is not equal to the current navigation id就是两次导航冲突的典型报错。

解决方案

你可以任选以下一种方法修复：

给子路由列表项添加点击事件阻止冒泡
在每个子路由的<mat-list-item>标签上添加(click)="$event.stopPropagation()"，阻止点击事件向上传递到外层面板，避免触发父级路由跳转，修改后代码示例：
```
<mat-list-item
  class="sidebar-item"
  routerLink="data/appdata"
  (click)="$event.stopPropagation()"
><mat-icon>arrow_right</mat-icon> App Data
</mat-list-item>
```
调整外层面板的路由绑定逻辑
如果不需要点击整个展开面板就触发/data路由跳转，直接删除<mat-expansion-panel>上的routerLink="data"和routerLinkActive="selected"属性即可。如果需要保留面板头部的跳转功能，仅给<mat-expansion-panel-header>单独绑定路由，不要给整个面板绑定，也能避免内部点击触发父级路由。