Angular嵌套笔记页面routerLink跳转路径错误问题排查

问题根因 #

核心是DOM事件冒泡触发了两个路由跳转：
你将跳转编辑页的[routerLink]="['/edit', note.id]"绑定在了父元素<mat-list-item>上，同时内部的箭头按钮绑定了跳转子笔记列表的[routerLink]="['/notes', note.id]"。Angular的routerLink指令默认监听宿主元素的click事件触发导航，点击箭头按钮时，点击事件会从子元素向上冒泡到父级<mat-list-item>，先后触发两个导航逻辑：先执行按钮的跳转进入/notes/xxx，再执行父元素的跳转进入/edit/xxx，所以你最终看到的是编辑页，而子笔记列表页被压入了导航栈，点击返回才能显示。

修复方案 #

方案1：阻止事件冒泡（最便捷） #

给内部箭头按钮添加点击事件，阻止冒泡到父元素即可：

<button mat-icon-button 
  *ngIf="note.children.length > 0" 
  [routerLink]="['/notes', note.id]"
  (click)="$event.stopPropagation()">
  <mat-icon>arrow_forward_ios</mat-icon>
</button>

方案2：调整路由绑定区域 #

将编辑页的routerLink从整个<mat-list-item>移到左侧的图标、标题区域，仅点击左侧内容才触发编辑跳转，按钮区域独立操作，从根源避免事件冲突。

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