Angular项目中登录后集成Dashboard组件并复用AppLayout布局的实现

嘿，我来帮你一步步搞定这个Angular组件整合和布局的问题，咱们从路由配置到组件嵌套逐步实现：

1. 配置 Angular 路由 #

首先得通过路由区分登录页和受保护的Dashboard页面，实现登录跳转和导航逻辑。在app-routing.module.ts中添加如下配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth/auth.guard'; // 后续实现的登录守卫

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { 
    path: '', 
    canActivate: [AuthGuard], // 仅登录用户可访问该路由组
    component: AppLayoutModelComponent, // 用布局组件作为父容器
    children: [
      { path: 'dashboard', component: DashboardComponent },
      // 可在此添加其他页面路由，比如用户管理、设置等
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' } // 默认跳转Dashboard
    ]
  },
  { path: '**', redirectTo: '/login' } // 404页面自动跳登录
];

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

2. 实现登录守卫（AuthGuard） #

这个守卫用来校验用户登录状态，未登录时自动跳转到登录页。创建auth.guard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

3. 登录状态管理服务（AuthService） #

用来统一管理登录状态和用户信息，创建auth.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private loggedIn = new BehaviorSubject<boolean>(false);

  get isLoggedIn$() {
    return this.loggedIn.asObservable();
  }

  isLoggedIn(): boolean {
    return this.loggedIn.value;
  }

  login(username: string, password: string) {
    // 替换为你的真实登录逻辑（比如调用后端API）
    if (username && password) {
      this.loggedIn.next(true);
      return true;
    }
    return false;
  }

  logout() {
    this.loggedIn.next(false);
  }
}

4. 修改 AppLayoutModel 组件，添加子路由出口 #

你的布局组件已经包含了工具栏和侧边菜单按钮，现在需要在布局内添加一个路由出口，用来渲染Dashboard等子页面内容：

<div class="page">
  <div>
    <mat-toolbar color="primary" class="...">
      <!-- 侧边菜单按钮 -->
      <button mat-icon-button (click)="toggleSidebar(sidenav)">
        <mat-icon>menu</mat-icon>
      </button>
      <span>你的应用名称</span>
      <!-- 工具栏右侧的退出按钮 -->
      <button mat-button (click)="authService.logout()">退出登录</button>
    </mat-toolbar>
  </div>
  <div class="content-container">
    <mat-sidenav-container class="sidenav-container">
      <!-- 侧边菜单抽屉 -->
      <mat-sidenav #sidenav mode="side" opened="false">
        <mat-nav-list>
          <!-- Dashboard导航链接 -->
          <a mat-list-item routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
          <!-- 可添加其他导航项 -->
        </mat-nav-list>
      </mat-sidenav>
      <!-- 子路由出口：用来渲染Dashboard等组件 -->
      <mat-sidenav-content>
        <router-outlet></router-outlet>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</div>

对应的组件类处理侧边栏切换和依赖注入：

import { Component } from '@angular/core';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-app-layout-model',
  templateUrl: './app-layout-model.component.html',
  styleUrls: ['./app-layout-model.component.css']
})
export class AppLayoutModelComponent {
  constructor(public authService: AuthService) {}

  toggleSidebar(sidenav: any) {
    sidenav.toggle();
  }
}

5. 简化 AppComponent 模板 #

App组件只需要放置一个顶级路由出口，让路由自动控制显示登录页还是布局+子组件：

<router-outlet></router-outlet>

6. 完善 LoginComponent 的登录跳转逻辑 #

在登录组件中调用AuthService完成登录，成功后跳转到Dashboard：

import { Component } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username = '';
  password = '';

  constructor(private authService: AuthService, private router: Router) {}

  onLogin() {
    if (this.authService.login(this.username, this.password)) {
      this.router.navigate(['/dashboard']);
    } else {
      // 登录失败提示，可替换为更友好的UI提示
      alert('登录失败，请检查用户名和密码');
    }
  }
}

最终效果说明 #

• 用户打开应用时，因未登录会被守卫拦截，自动跳转到Login组件
• 登录成功后，路由跳转到Dashboard，此时AppLayoutModel组件显示工具栏和侧边菜单按钮，Dashboard组件渲染在布局的内容区域
• 点击侧边菜单的Dashboard链接，会重新加载Dashboard组件，同时保持布局不变

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