Angular项目在两个页面使用侧边栏，点击Home后页面空白如何解决

问题原因及修复方案 #

导致点击Home选项页面空白的核心问题有3处，按优先级修改即可解决：

• 布局逻辑循环嵌套
  你在Home.component.html里引入了<app-sidebar>组件，而如果你的路由配置是将Home作为Sidebar的子路由挂载，就会出现「侧边栏加载子页面→子页面又加载侧边栏」的无限循环，最终导致页面渲染异常空白。
• 侧边栏没有路由出口挂载子内容
  你当前的sidebarComponent.html中右侧内容区域只有一个空导航栏，没有添加Angular的路由出口标签<router-outlet>，子页面的内容没有渲染位置，自然显示空白。
• 跳转未使用Angular路由指令
  侧边栏里的跳转用了原生href属性，会触发整页刷新，没有走Angular的单页路由体系，也可能导致路由匹配失败。

具体修改步骤 #

1. 删除Home.component.html和Devise.component.html模板第一行的<app-sidebar></app-sidebar>代码，子页面不需要重复引入侧边栏，统一由父布局Sidebar组件提供。
2. 修改sidebarComponent.html的右侧内容区域，添加路由出口：

<div class="w-100">
  <nav class="navbar navbar-light" style="background-color: #1F6AB3; "></nav>
  <!-- 新增路由出口，用来加载Home、Devise等子页面内容 -->
  <router-outlet></router-outlet>
</div>

3. 将侧边栏的原生跳转替换为Angular的routerLink指令：

<!-- 原写法 <a href="home" class="nav-link text-white"> -->
<a routerLink="/home" class="nav-link text-white">
  <i class="fa fa-key"></i><span class="ms-2">Home</span>
</a>

<!-- 原写法 <a href="devise" class="nav-link text-white"> -->
<a routerLink="/devise" class="nav-link text-white">
  <i class="fa fa-credit-card"></i><span class="ms-2">Devise</span>
</a>

4. 确认你的路由配置为父子路由结构，参考示例：

const routes: Routes = [
  {
    path: '',
    component: SidebarComponent,
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'devise', component: DeviseComponent },
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  }
]

确认Home、Devise组件都已经在对应模块的declarations数组中正确声明。

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