Angular实现不同页面展示：登录页需独立无导航栏侧边栏

这个问题很常见——当你把导航栏、侧边栏这些全局组件直接写在根模板里时，所有路由页面都会带上它们。要让登录页全屏显示，我给你两种实用的解决方案：

方案一：通过路由判断动态控制布局显示（快速实现） #

这种方法不需要重构路由，只需要在根组件里监听路由变化，动态切换导航栏等组件的显示状态。

步骤1：修改AppComponent逻辑 #

在app.component.ts中注入路由服务，监听路由导航事件，判断当前是否是登录页：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 控制布局组件是否显示
  showLayout = true;

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 根据当前路由路径判断是否显示布局
      // 你的登录页path是空字符串，所以判断当前URL是否为根路径
      this.showLayout = this.router.url !== '/';
    });
  }
}

步骤2：修改根模板app.html #

给需要隐藏的组件加上*ngIf指令，绑定showLayout变量：

<html>
  <!-- 只有非登录页才显示导航栏 -->
  <app-nav *ngIf="showLayout"></app-nav>
  <body>
    <!-- 只有非登录页才显示侧边栏 -->
    <app-sidebar *ngIf="showLayout"></app-sidebar>
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </body>
  <!-- 只有非登录页才显示页脚 -->
  <app-footer *ngIf="showLayout"></app-footer>
</html>

方案二：使用布局组件重构路由（优雅的最佳实践） #

如果你的项目后续会有更多页面需要不同布局，这种方法更具扩展性。核心思路是把带导航的布局抽成独立组件，让需要布局的路由作为它的子路由，登录页直接作为根路由渲染。

步骤1：创建布局组件 #

生成一个LayoutComponent（可以用ng generate component layout命令快速创建），把原来app.html里的导航、侧边栏、页脚移到这个组件里：

<!-- layout.component.html -->
<app-nav></app-nav>
<body>
  <app-sidebar></app-sidebar>
  <div class="container">
    <!-- 这里是子路由的出口 -->
    <router-outlet></router-outlet>
  </div>
</body>
<app-footer></app-footer>

步骤2：修改路由配置 #

更新AppModule的路由，让需要布局的页面成为布局组件的子路由，登录页独立出来：

const appRoutes: Routes = [
  // 登录页直接渲染，不经过布局组件
  { path: '', component: LoginComponent },
  // 布局组件作为父路由，包含需要导航栏的页面
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'dashboard', component: EnvironmentComponent },
      { path: 'docker', component: DockerComponent }
    ]
  }
];

步骤3：简化根模板app.html #

现在根模板只需要保留最基础的路由出口即可：

<html>
  <body>
    <router-outlet></router-outlet>
  </body>
</html>

方案对比 #

• 方案一：适合快速解决问题，代码改动小，适合小型项目或临时需求。
• 方案二：更符合Angular的组件化思想，扩展性强，后续添加新页面时可以轻松复用不同布局。

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