Angular配置relativeTo参数实现跨组件相对路由跳转失败

代码层面的直接问题 #

你当前navigateToOwnerTypePage()方法的实现存在配置逻辑矛盾：

this._router.navigate(['/owner'], {relativeTo: this.route});

按照Angular路由的解析规则，只要导航路径段以/开头，就会被判定为从根路径开始的绝对路径，此时传入的relativeTo配置完全不会生效。这类混合写法在存在嵌套路由的场景下，很容易触发路由解析的非预期异常，导致跳转失效。

修正后的正确写法 #

navigateToOwnerTypePage() {
  // 绝对路径跳转不需要额外传递当前激活路由的上下文
  this._router.navigate(['/owner']);
}

其余容易遗漏的排查方向 #

• 确认根组件app.component.html中存在<router-outlet></router-outlet>路由出口。缺少该出口时，哪怕路由跳转成功触发，目标组件也无法被渲染，直观表现就是跳转没有效果。
• 确认根模块app.module.ts的imports数组中正确引入了AppRoutingModule，未引入路由模块时，所有配置的路由规则都不会生效。
• 确认ChooseOwnerComponent已经被添加到所属模块的declarations数组中，未被声明的组件无法被路由正常渲染。
• 如果后续需要使用相对路径跳转，务必去掉路径开头的/：例如要从当前激活路由的下级匹配owner路径，写法应为this._router.navigate(['owner'], {relativeTo: this.route})，开头带斜杠搭配relativeTo属于冗余且易引发异常的写法。

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