Angular 6登录页独立模板配置：移除导航、侧边栏与页脚

嘿，这个需求在Angular开发里特别常见，我给你分享两种简单实用的实现方式，你可以根据项目规模和习惯来选：

方法一：通过监听路由状态动态控制显示隐藏 #

这种方式适合小型项目，改动量小，直接在根组件里判断当前路由是否为登录页，从而控制布局组件的显示。

步骤1：修改app.component.html模板 #

用*ngIf指令给需要隐藏的组件添加判断条件：

<app-nav *ngIf="!isLoginPage"></app-nav>
<app-sidebar *ngIf="!isLoginPage"></app-sidebar>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer *ngIf="!isLoginPage"></app-footer>

步骤2：在app.component.ts中注入Router并监听路由 #

通过监听路由导航结束事件，判断当前页面是否为登录页：

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

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

  constructor(private router: Router) {
    // 监听路由导航完成事件
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 判断当前URL是否为登录页
        this.isLoginPage = event.url === '/login';
      }
    });
  }
}

这样一来，当用户访问登录页时，isLoginPage会变成true，对应的布局组件就会被隐藏；访问其他页面时则正常显示。

方法二：拆分路由布局（更推荐，适合中大型项目） #

这种方式通过创建专门的布局组件，将带布局的页面统一归到父路由下，结构更清晰，后期扩展新页面时不需要修改判断逻辑。

步骤1：创建LayoutComponent #

生成一个新的布局组件（比如layout.component），把原来app.component.html里的布局代码移到这里：

<!-- layout.component.html -->
<app-nav></app-nav>
<app-sidebar></app-sidebar>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

步骤2：修改根组件app.component.html #

根组件只保留主路由出口即可：

<router-outlet></router-outlet>

步骤3：更新路由配置（module.ts） #

把需要显示布局的页面放到布局组件的子路由下，登录页单独配置：

const appRoutes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  // 带布局的父路由
  { 
    path: '', 
    component: LayoutComponent,
    children: [
      { path: 'dashboard', component: EnvironmentComponent },
      { path: 'docker', component: DockerComponent }
    ]
  }
];

这样配置后，登录页会直接渲染，而dashboard、docker等页面会先渲染LayoutComponent，再在其内部的路由出口渲染自身内容，自然就带上了导航、侧边栏和页脚。

两种方案对比 #

• 方法一：实现简单，快速见效，适合小型项目或临时需求。
• 方法二：结构更规范，代码可维护性更高，后期新增页面时只需添加到子路由即可，推荐在中大型项目中使用。

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