如何在Angular 5中动态切换页面？适配非通用模板场景

嘿，我明白你的需求了——现有Angular 5应用用AppComponent作为引导组件，带侧边栏、工具栏和router-outlet，大部分页面都正常，但需要两个未登录状态的页面完全脱离这个模板对吧？给你推荐最清晰的实现方案，用多布局路由的方式，完全符合Angular的最佳实践：

步骤1：重构主布局组件 #

首先把原来AppComponent里的侧边栏、工具栏抽成独立的主布局组件，让AppComponent只做根路由容器：

1. 生成主布局组件：

ng generate component main-layout

2. 把原来app.component.html里的内容移到main-layout.component.html：

<app-sidebar></app-sidebar>
<app-toolbar></app-toolbar>
<router-outlet></router-outlet>

3. 修改app.component.html，只保留根路由出口：

<router-outlet></router-outlet>

步骤2：创建公共布局组件 #

为未登录页面创建一个不带侧边栏/工具栏的公共布局：

1. 生成公共布局组件：

ng generate component public-layout

2. 编辑public-layout.component.html，只保留需要的结构（比如顶部logo+路由出口）：

<div class="public-page-wrapper">
  <h1>未登录首页专属顶部区域</h1>
  <router-outlet></router-outlet>
</div>

步骤3：配置路由区分布局 #

在app-routing.module.ts里配置路由，让不同路径对应不同布局：
先导入所需组件和权限守卫（假设你有判断登录状态的AuthGuard）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainLayoutComponent } from './main-layout/main-layout.component';
import { PublicLayoutComponent } from './public-layout/public-layout.component';
import { HomeComponent } from './home/home.component'; // 未登录首页
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component'; // 已登录后首页
import { AuthGuard } from './auth.guard'; // 登录状态守卫

然后配置路由规则：

const routes: Routes = [
  // 公共布局：未登录页面，不需要权限
  {
    path: '',
    component: PublicLayoutComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'login', component: LoginComponent }
    ]
  },
  // 主布局：已登录页面，需要权限守卫拦截
  {
    path: 'app',
    component: MainLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      // 其他需要侧边栏的页面路由都放在这里
    ]
  },
  // 404重定向到公共首页
  { path: '**', redirectTo: '' }
];

步骤4：完善登录状态守卫（可选但必要） #

如果还没做登录状态判断，生成一个AuthGuard来拦截未登录用户访问主布局：

ng generate guard auth

编辑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;
    }
    // 未登录就跳转到登录页
    this.router.navigate(['/login']);
    return false;
  }
}

步骤5：登录后跳转逻辑 #

在登录组件的登录成功回调里，跳转到主布局的页面：

login() {
  this.authService.login(this.username, this.password).subscribe(
    () => {
      this.router.navigate(['/app/dashboard']);
    },
    error => {
      // 处理登录失败逻辑
    }
  );
}

这样一来，未登录时访问的/home、/login会使用公共布局（完全没有侧边栏和工具栏），登录后访问的/app/dashboard等页面会自动加载带侧边栏的主布局，完全满足你的需求。

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