Angular中如何在主组件指定区域渲染Home/Item组件？

要实现点击侧边栏Home/Itens时，对应组件渲染到main-nav的router-outlet，核心是配置嵌套路由，让main-nav作为父容器承载子路由组件，具体步骤如下：

1. 调整路由配置为嵌套结构 #

修改路由配置文件（一般是app-routing.module.ts），把Home、Itens组件的路由设置为main-nav的子路由，确保登录后进入的路由都嵌套在main-nav之下：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // 父路由：main-nav作为容器，包裹子路由内容
  { 
    path: '', 
    component: MainNavComponent, 
    canActivate: [AuthGuard], // 保留你项目中的登录守卫
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' }, // 默认加载Home
      { path: 'home', component: HomeComponent },
      { path: 'itens', component: ItemListarComponent }
    ]
  },
  { path: '**', redirectTo: 'login' } // 404重定向到登录页
];

2. 修正侧边栏导航链接 #

在main-nav的侧边栏模板中，使用Angular的routerLink指令替代普通链接，指向子路由路径，并添加routerLinkActive标记当前激活项：

<!-- 侧边栏导航示例 -->
<mat-nav-list>
  <a mat-list-item routerLink="/home" routerLinkActive="active-link">Home</a>
  <a mat-list-item routerLink="/itens" routerLinkActive="active-link">Itens</a>
</mat-nav-list>

同时在main-nav的CSS中添加激活样式（可选，提升用户体验）：

.active-link {
  background-color: rgba(150, 150, 150, 0.1);
  font-weight: 500;
}

3. 确认main-nav的router-outlet位置 #

确保main-nav模板中标记"content here"的区域已经正确放置<router-outlet>，这是子路由组件的渲染出口：

<!-- main-nav组件核心结构 -->
<div class="app-container">
  <mat-sidenav mode="side" opened>
    <!-- 侧边栏内容 -->
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- 内容渲染区域 -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</div>

4. 验证路由守卫权限 #

如果你的项目使用了登录守卫（AuthGuard），要确保守卫逻辑允许已登录用户访问home和itens路由，避免出现登录后无法跳转的情况。

内容的提问来源于stack exchange，提问作者Júnior Baum