Angular如何在dashboard组件中使用额外router-outlet实现侧边栏路由

1. 配置嵌套子路由 #

在项目的主路由配置文件（通常为app-routing.module.ts）中，为dashboard路由添加children属性配置子路由，实现路由层级嵌套：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
// 导入对应子组件
import { ProductsComponent } from './products/products.component';
import { BrandsComponent } from './brands/brands.component';
import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
import { AddUserComponent } from './add-user/add-user.component';

const routes: Routes = [
  // 原有其他主路由保留即可
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'products', component: ProductsComponent },
      { path: 'brands', component: BrandsComponent },
      { path: 'subscriptions', component: SubscriptionsComponent },
      { path: 'add-user', component: AddUserComponent },
      // 访问/dashboard时默认重定向到products页面
      { path: '', redirectTo: 'products', pathMatch: 'full' }
    ]
  }
];

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

2. 改造Dashboard组件模板 #

替换原有静态a标签为路由跳转链接，内容区插入<router-outlet>承载子组件内容，同时通过routerLinkActive自动匹配激活状态的样式：

<section>
<div class="sidebar">
    <a 
      class="sidelink d-block p-3 second-font" 
      routerLink="/dashboard/products" 
      routerLinkActive="active"
    >Products</a>
    <a 
      class="sidelink d-block p-3 second-font" 
      routerLink="/dashboard/brands" 
      routerLinkActive="active"
    >Brands</a>
    <a 
      class="sidelink d-block p-3 second-font" 
      routerLink="/dashboard/subscriptions" 
      routerLinkActive="active"
    >Subscribtions</a>
    <a 
      class="sidelink d-block p-3 second-font" 
      routerLink="/dashboard/add-user" 
      routerLinkActive="active"
    >Add User</a>
</div>

<div class="content">
    <!-- 子路由匹配到的组件会渲染在此处 -->
    <router-outlet></router-outlet>
</div>
</section>

3. 补充布局样式（按需调整） #

添加样式实现20%侧边栏+80%内容区的布局：

section {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.sidebar {
  width: 20%;
  /* 可自行补充侧边栏背景、边框等样式 */
}
.content {
  width: 80%;
  padding: 20px;
  box-sizing: border-box;
}

注意事项 #

• 提前创建好ProductsComponent、BrandsComponent等四个子组件，并在项目模块中完成声明
• 如果项目路由配置有baseHref前缀，同步调整routerLink的路径即可

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