Angular中如何让子组件显示在主内容区域？

项目默认进入登录页面，登录后进入仪表盘，但点击侧边栏按钮后，Home、Employee等子组件无法显示在主内容区域的<router-outlet>中。

排查与修复步骤 #

• 添加dashboard默认子路由：当前进入/dashboard时没有默认加载的子组件，需在dashboard的子路由数组中添加默认跳转规则，确保进入仪表盘自动显示Home组件：

  // 在app-routing.module.ts的dashboard.children数组中添加
  { path: '', redirectTo: 'home', pathMatch: 'full' }
  

• 补全所有侧边栏按钮的路由跳转逻辑：目前只有Home和Employee按钮绑定了跳转方法，其余按钮（如Borrowing Devices、Returning Devices等）需添加对应跳转函数并绑定到点击事件：

  // 在dashboard.component.ts中添加
  borrowDevice() {
    this.router.navigate(['/dashboard/borrow-device']);
  }
  returnDevice() {
    this.router.navigate(['/dashboard/return-device']);
  }
  // 其他按钮对应的跳转方法同理
  

  并在html中绑定：

  <button mat-button class="menu-button" (click)="borrowDevice()">
    <mat-icon>add_shopping_cart</mat-icon>
    <span>Borrowing Devices</span>
  </button>
  

• 确认子组件的模块声明：检查HomeComponent、EmployeeComponent等所有子组件是否在所属模块中正确声明并导出，避免Angular无法识别组件。
• 校验路由路径拼写：确保router.navigate中的路径与路由配置里的path完全一致，比如/dashboard/employee对应路由中的employee，无拼写错误。
• 排查样式隐藏问题：检查.content类的CSS样式，确认没有display: none、visibility: hidden或高度为0的设置，可临时添加测试样式：

  .content {
    min-height: 500px;
    padding: 20px;
  }
  

相关代码文件 #

dashboard.component.html #

<mat-toolbar>
    <button mat-icon-button *ngIf="sidenav.mode =='over'" (click)="sidenav.toggle()">
        <mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
        <mat-icon *ngIf="sidenav.opened">close</mat-icon>
    </button>
    Electric Devices Borrowing Website
    <button mat-button (click)="logout()">
        <mat-icon>logout</mat-icon>
        Logout
    </button>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #sidenav="matSidenav">
        <img width="100" height="100" class="avatar mat-elevation-z8" src="assets/image/logoproject.png">
        <h4 class="name">EDBW Company</h4>
        <mat-divider></mat-divider>
        <button mat-button class="menu-button" (click)="home()">
            <mat-icon>home</mat-icon>
            <span>Home</span>
        </button>
        <button mat-button class="menu-button" (click)="employee()">
            <mat-icon>person</mat-icon>
            <span>Employees</span>
        </button>
        <button mat-button class="menu-button">
            <mat-icon>add_shopping_cart</mat-icon>
            <span>Borrowing Devices</span>
        </button>
        <button mat-button class="menu-button">
            <mat-icon>backspace</mat-icon>
            <span>Returning Devices</span>
        </button>
        <button mat-button class="menu-button">
            <mat-icon>list_alt</mat-icon>
            <span>Status Tables</span>
        </button>
        <br /><br /><br />
        <mat-divider></mat-divider>
        <button mat-button class="menu-button">
            <mat-icon>info</mat-icon>
            <span>About us</span>
        </button>
        <button mat-button class="menu-button">
            <mat-icon>help</mat-icon>
            <span>Help</span>
        </button>

    </mat-sidenav>
    <mat-sidenav-content>
        <div class="content mat-elevation-z4">
            Main Content
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

dashboard.component.ts（已更新） #

home() {
    this.router.navigate(['/dashboard/home']);
}
employee(){
    this.router.navigate(['/dashboard/employee']);
}

app-routing.module.ts（已更新） #

const routes: Routes = [
  {path: '', redirectTo:'login', pathMatch:'full'},
  {path: 'login', component : LoginComponent},
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
        path: 'employee',
        component: EmployeeComponent,
      },
      {
        path: 'borrow-device',
        component: BorrowComponent,
      },
      {
        path: 'return-device',
        component: ReturnComponent,
      },
      {
        path: 'status-table',
        component: StatusComponent,
      },
      {
        path: 'about-us',
        component: AboutUsComponent,
      },
      {
        path: 'help',
        component: HelpComponent,
      },
    ],
  },
  {path: 'register', component : RegisterComponent},
  {path: 'forgot-password', component : ForgotPasswordComponent},
  {path: 'verify-email', component : VerifyEmailComponent},
];

app.component.html #

<router-outlet></router-outlet>

内容的提问来源于stack exchange，提问作者Siripaiboon Flame Janpetch