Angular 16懒加载与嵌套子路由配置异常求助

问题根源 #

1. 父组件缺少子路由出口：HomeComponent作为嵌套子路由的父组件，模板中未添加<router-outlet>，导致子路由组件GroupHostDetailComponent无法被渲染，始终只显示父组件内容。
2. 路由结构冗余：当前路由配置存在层级冗余，重定向逻辑容易引发路径匹配混乱。

修复步骤 #

1. 调整Dashboard模块路由配置 #

简化dashboard-routing-module.ts的路由结构，避免冗余层级：

export const dashboardRoutes: Routes = [
  {
    path: "",
    pathMatch: 'full',
    redirectTo: 'dashboard'
  },
  {
    path: "dashboard",
    title: "Dashboard",
    component: HomeComponent,
    data: {
      title: "Home"
    },
    children: [
      {
        path: "group_host/:group_host_id",
        title: "Groupe Host",
        component: GroupHostDetailComponent,
        data: {
          title: "Groupe Host"
        }
      }
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

2. 为HomeComponent添加子路由出口 #

在home.component.html中添加<router-outlet>，用于渲染嵌套子路由组件：

<!-- 原有HomeComponent内容 -->
<h1>Home Dashboard</h1>
<!-- 子路由出口 -->
<router-outlet></router-outlet>

3. 验证访问路径 #

完成上述修改后，访问/dashboard/group_host/1时，Angular会：

• 匹配根路由的空路径，懒加载Dashboard模块
• 匹配Dashboard模块中的dashboard路由，渲染HomeComponent
• 匹配HomeComponent的子路由group_host/1，将GroupHostDetailComponent渲染到HomeComponent的<router-outlet>位置

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