Angular中如何加载指定内容而不刷新侧边栏组件？

问题原因 #

当前路由配置里，user和student是根级别路由，每次切换这两个路由时，即便AppComponent作为根组件不会销毁，但侧边栏依赖router.url的*ngIf判断，路由切换时的根组件切换逻辑会触发侧边栏所在DOM节点的重新评估，进而导致刷新。更合理的做法是通过路由嵌套，把侧边栏、头部导航封装到一个布局组件中，让需要侧边栏的页面作为该布局的子路由，这样布局组件只会初始化一次，子路由切换时不会影响布局部分。

解决方案步骤 #

1. 创建布局组件

生成一个LayoutComponent，把原AppComponent中包含侧边栏、头部的布局结构移到这个组件里：

<!-- layout.component.html -->
<div class="app-container">
  <app-header class="topbar"></app-header>
  <mat-drawer-container class="body-container">
    <mat-drawer mode="side" opened class="side-bar">
      <app-sidebar></app-sidebar>
    </mat-drawer>

    <mat-drawer-content class="main-container">
      <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>
</div>

2. 修改路由配置

将user和student改为布局组件的子路由，让需要权限验证的页面统一走布局路由：

// app-routing.module.ts
const routes: Routes = [
  { path: '', component: LoginComponent },
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'user', component: UserComponent },
      { path: 'student', component: StudentComponent },
      // 可选：添加默认子路由，进入布局后自动跳转到user页
      { path: '', redirectTo: 'user', pathMatch: 'full' }
    ]
  }
];

3. 简化根组件模板

AppComponent只保留根路由出口，负责切换登录页和布局页：

<!-- app.component.html -->
<router-outlet></router-outlet>

原理说明 #

• 布局组件LayoutComponent只会在第一次进入带AuthGuard的路由时初始化，包含的app-sidebar也只会渲染一次。
• 切换user/student时，只有布局组件内部的子路由出口会加载对应组件，布局本身不会被销毁重建，因此侧边栏不会刷新。
• 原有的router.url判断逻辑可以完全移除，因为登录页和布局页通过根路由出口分离，无需再通过URL判断显示隐藏。

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