Angular中ActivatedRoute.Snapshot.params与URL地址栏不同步问题排查

导航到不同ID的实体时，activatedRoute.snapshot.params['id']始终返回旧ID——URL地址栏已更新为新ID，但ActivatedRoute未同步，导致页面上的routerLink指向错误的href地址。

父组件中执行console.log(this.activatedRoute.snapshot.params['id'])能正常获取新ID，但父组件内的子组件<app-project-navigation>执行相同代码却得到错误结果。即使组件每次都会销毁重建，使用Observable版本的路由参数也返回错误值，最终导致routerLink="./contracts"这类相对路由链接无法正常工作。

经确认这是Angular 17的已知Bug，已在Angular 18.0版本中修复。

父组件模板代码 #

<div class="fadeIn">
  <!-- navigation menu -->
  <app-project-navigation></app-project-navigation> - 此处的激活路由参数与URL地址栏中的ID不匹配
  <!-- page router -->
  <router-outlet></router-outlet>
</div>

路由配置代码 #

{
  path: 'entity/:id',
  title: 'App | Entity Details',
  loadChildren: () => import('../entity-parent/entity-parent.routes').then((m) => m.ENTITY_ROUTES),
}

子组件逻辑代码 #

ngOnInit(){
  console.log(this.router.url)
  console.log(this.activatedRoute.snapshot.params['id']) // Observable版本的参数返回结果一致
}

路由链接模板代码 #

<li>
  <a routerLink="./contracts" routerLinkActive="active">
    CONTRACTS
  </a>
</li>

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