Angular中TS调用Router.navigate跳转失败但HTML routerLink正常如何解决

问题原因 #

• 模板中的[routerLink]指令默认会以当前组件激活的路由作为相对路径的计算基准，你在ModelComponent（对应路由为/projects/:projectId/model）下使用../compare，会自动基于当前路由向上退一级到/projects/:projectId/，再拼接compare和参数，最终生成正确路径。
• 而TS代码中调用router.navigate()方法时，默认的相对路径计算基准是应用的根路由，../compare会直接从根路由开始计算，自然无法匹配到预期的子路由路径，所以跳转失败。

路由配置是否需要修改 #

不需要，你当前的路由配置完全符合需求，不需要调整。

解决建议 #

调用navigate方法时，额外传入配置项，指定相对路径的基准为当前激活的路由即可：

1. 首先在ModelComponent中注入ActivatedRoute：

import { ActivatedRoute, Router } from '@angular/router';

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

2. 修改跳转代码：

this.router.navigate(['../compare', model.id], { relativeTo: this.route });

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