Angular中如何通过路由实现嵌套router-outlet加载子组件？

需求背景 #

已有基础路由配置：app-routing.module.ts定义路由规则，app.component.html使用<router-outlet>，访问localhost:4200/dashboard可加载DashboardComponent。希望在dashboard.component.html中添加嵌套<router-outlet>，保留导航栏、顶部栏布局，访问localhost:4200/dashboard/user时，将UserComponent渲染在嵌套路由出口，而非替换整个DashboardComponent。

最优实现方式：嵌套路由配置 #

这是Angular官方推荐的标准方案，完全适配你的需求，比@ViewChild更符合路由体系的设计，支持URL同步、子路由嵌套扩展。

步骤1：修改app-routing.module.ts配置嵌套路由 #

将DashboardComponent的路由配置改为带子路由的父路由，子路由对应UserComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  // 其他根路由...
  {
    path: 'dashboard',
    component: DashboardComponent,
    // 子路由配置
    children: [
      { path: 'user', component: UserComponent },
      // 可选：添加默认子路由，访问/dashboard时加载默认组件
      // { path: '', component: DashboardDefaultComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：在DashboardComponent中添加嵌套路由出口 #

在dashboard.component.html的布局预留位置（比如导航栏下方）添加<router-outlet>：

<!-- DashboardComponent的固定布局：导航栏、顶部栏 -->
<app-top-bar></app-top-bar>
<app-sidebar></app-sidebar>

<!-- 嵌套路由出口：子组件将渲染在这里 -->
<router-outlet></router-outlet>

步骤3：测试访问 #

• 访问localhost:4200/dashboard：加载DashboardComponent的完整布局，嵌套路由出口为空（如果没配置默认子路由）
• 访问localhost:4200/dashboard/user：DashboardComponent的布局保留，UserComponent渲染在嵌套路由出口位置

为什么这是最优方案？ #

• 完全遵循Angular路由设计规范，URL与组件状态同步，支持浏览器前进后退
• 天然支持多层嵌套路由（比如后续可以扩展/dashboard/user/detail）
• 无需手动操作组件实例，路由模块自动管理组件的挂载与销毁
• 与Angular的路由守卫、懒加载等特性兼容

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