Angular如何优先加载Login组件 实现登录页无侧边栏独立布局

两种实现方式，优先选第一种嵌套路由方案，长期维护成本更低。 #

方案1：嵌套路由（推荐） #

核心思路是把通用布局（侧边栏、顶栏）抽成独立组件，通过路由嵌套区分「带布局页面」和「无布局页面」。

• 1. 修改路由配置
     打开app-routing.module.ts，把路由拆成无布局、带布局两个分组：

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  // 无布局路由：登录页直接挂载，不加载侧边栏、顶栏
  { path: 'login', component: LoginComponent },
  // 带布局路由父节点：所有需要显示侧边栏、顶栏的页面都放在children数组中
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent }
    ]
  }
];

• 2. 新建通用布局组件
     执行命令生成Layout组件：ng generate component layout，把原来写在app.component.html里的抽屉容器、侧边栏、顶栏代码全部挪到layout.component.html中，保留内部的<router-outlet>用来渲染子页面：

<!-- layout.component.html -->
<mat-drawer-container>
  <mat-drawer mode="side" [opened]="sideBarOpen">
    <app-sidenav></app-sidenav>
  </mat-drawer>
  <mat-drawer-content>
    <app-header (toggleSidebarForMe)="sideBarToggler()"></app-header>
    <router-outlet></router-outlet>
  </mat-drawer-content>
</mat-drawer-container>

同时把sideBarOpen变量、sideBarToggler()侧边栏开关方法从AppComponent挪到LayoutComponent中。

• 3. 简化根组件模板
     把app.component.html的内容清空，只保留根路由出口：

<!-- app.component.html -->
<router-outlet></router-outlet>

配置完成后：

• 访问/login时，路由直接匹配LoginComponent，页面只显示登录内容，没有侧边栏、顶栏
• 登录成功跳转到/dashboard时，路由会先加载LayoutComponent（自带侧边栏、顶栏），再在布局内部渲染DashboardComponent，符合需求
  后续新增需要带侧边栏的页面（比如系统设置、个人中心），只要把路由配置加到LayoutComponent的children数组里即可，不需要额外改布局逻辑。

方案2：根组件路由判断（适合小型项目快速改造） #

如果不想新增布局组件，可以直接在根组件监听路由变化，通过*ngIf控制布局元素的显示隐藏。

• 1. 修改根组件逻辑
     打开app.component.ts，注入路由服务，监听路由变化判断当前是否为登录页：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  sideBarOpen = true;
  isLoginPage = false;

  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 匹配根路径、登录路径时标记为登录页
      this.isLoginPage = ['/', '/login'].includes(event.urlAfterRedirects);
    });
  }

  sideBarToggler() {
    this.sideBarOpen = !this.sideBarOpen;
  }
}

• 2. 修改根组件模板
     打开app.component.html，通过模板判断分别渲染登录页、带布局的业务页：

<!-- 非登录页渲染带侧边栏、顶栏的布局 -->
<mat-drawer-container *ngIf="!isLoginPage; else loginTemplate">
  <mat-drawer mode="side" [opened]="sideBarOpen">
    <app-sidenav></app-sidenav>
  </mat-drawer>
  <mat-drawer-content>
    <app-header (toggleSidebarForMe)="sideBarToggler()"></app-header>
    <router-outlet></router-outlet>
  </mat-drawer-content>
</mat-drawer-container>

<!-- 登录页单独渲染，无多余布局 -->
<ng-template #loginTemplate>
  <router-outlet></router-outlet>
</ng-template>

注意：登录成功后跳转逻辑要保证跳转到/dashboard路径，不要残留登录页相关的路由参数即可。

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