如何从其他组件加载Foo组件的子路由？Angular路由问题求助

错误原因 #

你的foo-child是foo的子路由，路由配置要求它必须通过/foo/foo-child的路径访问，但你所有尝试的导航路径都未匹配这个层级关系：

• 直接使用foo-child或/foo-child：根路由下不存在foo-child路由，导致匹配失败。
• 搭配relativeTo: activatedRoute：side-nav组件挂载在根组件（app.component），其activatedRoute属于根路由上下文，./或../无法定位到foo路由下的子路由。

正确实现方案 #

方案1：绝对路径导航（推荐） #

直接指定完整路由路径，不受当前路由上下文限制：

showFooChild() {
  this.router.navigate(["/foo/foo-child"]);
}

方案2：基于父路由的相对导航（需调整组件挂载位置） #

如果希望侧边栏跟随当前路由上下文导航，需要将side-nav组件移至FooComponent内部，此时activatedRoute的上下文为foo路由，可使用相对路径：

// 此时side-nav属于FooComponent的子组件
showFooChild() {
  this.router.navigate(["foo-child"], { relativeTo: this.activatedRoute });
}

方案3：分步导航 #

若需先加载FooComponent再加载子组件，可分两步导航：

showFooChild() {
  // 先进入foo路由
  this.router.navigate(["/foo"]).then(() => {
    // 再导航到子路由
    this.router.navigate(["foo-child"], { relativeTo: this.activatedRoute });
  });
}

额外验证 #

确认路由模块已正确配置：RouterModule.forRoot(routes)需在AppRoutingModule中正确导入，且FooComponent、FooChildComponent已在对应模块中声明。

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