Angular懒加载路由routerLink正常但router.navigate跳转失败问题

问题原因 #

Router.navigate方法默认从应用根路由开始匹配路径，而模板里的[routerLink]指令默认基于当前组件所在的激活路由做相对路径匹配，因此直接给navigate方法传['edit']会试图匹配根路由下的edit路径，和你实际的路由结构不匹配。
你之前尝试用/edit失败是因为/开头的路径属于根路由绝对路径，你的根路由下没有注册edit路径，该路径实际挂载在懒加载的something父路由下。

解决方法 #

方案1：使用相对路由匹配（和模板routerLink行为一致）

给navigate方法传入relativeTo配置项，指定基于当前激活路由匹配路径，需要先注入ActivatedRoute实例：

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

// 构造器注入
constructor(
  private _router: Router,
  private _activatedRoute: ActivatedRoute
) {}

public tryToNavigate(): void {
  this._router.navigate(['edit'], { relativeTo: this._activatedRoute });
}

方案2：使用完整绝对路径

直接写全路由层级的绝对路径即可：

public tryToNavigate(): void {
  this._router.navigate(['/something/edit']);
}

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