使用父命名路由出口无法导航至嵌套/子路由问题求助

首先，我们需要修正导航逻辑写法、优化路由配置，同时借助ActivatedRoute来处理相对路由，才能解决你遇到的问题。

步骤1：修改HomeComponent的导航逻辑 #

先在HomeComponent中注入ActivatedRoute，然后调整go()方法的导航代码：

import { NgModule, Component } from '@angular/core';
import { RouterModule, Router, ActivatedRoute } from '@angular/router'; // 引入ActivatedRoute
import { BrowserModule } from '@angular/platform-browser';

@Component({
 selector: 'app-home',
 template: '<button (click)="go()">Go To Other Dashboard</button>'
})
export class HomeComponent {
 constructor( public router: Router, private route: ActivatedRoute ) {} // 注入ActivatedRoute
 go(){
   // 正确的导航代码
   this.router.navigate([{ outlets: { 'content': ['otherDashboard'] } }], { relativeTo: this.route });
 }
}

步骤2：优化路由配置 #

你的路由配置中，otherDashboard作为mainDashboard的子路由，不需要重复指定outlet: 'content'——因为父路由mainDashboard已经挂载在content出口上，子路由会自动继承并渲染到同一个出口：

export const routes: Array<any> = [
 {path: '',component: LoginComponent },
 {path: 'dashboard', component: MainDashboardComponent, children: [
   {path: 'mainDashboard',component: HomeComponent,outlet: 'content',
    children: [{path: 'otherDashboard',component: OtherDashboardComponent}] } // 移除冗余的outlet配置
  ]
 }
]

原代码报错的原因 #

• 错误使用了混乱的绝对路径层级（../dashboard），没有基于当前激活的mainDashboard路由做相对导航，导致Router无法定位到子路由。
• 重复指定了完整的父路径（../dashboard/mainDashboard/otherDashboard），完全没必要——我们已经在mainDashboard对应的组件中，只需要直接指向子路由otherDashboard即可。
• 缺少relativeTo配置，Router不知道该基于哪个路由上下文解析相对路径。

这样修改后，点击按钮就能正确在content命名出口中渲染OtherDashboardComponent了。

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