如何实现授权页面不显示Sidebar、Navbar和Footer，其余页面正常显示？

嘿，我来帮你搞定这个需求！要实现授权页面（比如Sign_In）不显示Sidebar、Navbar和Footer，其他页面正常显示，这里有两种实用的方案，你可以根据项目情况选择：

方案一：在根组件中根据路由动态控制显示（快速实现） #

这种方法适合小型项目，直接在AppComponent里监听路由变化，判断当前是否是授权页面，从而控制布局组件的显示隐藏。

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

把原来的布局用*ngIf包裹，同时添加一个单独的router-outlet用于显示授权页面：

<!-- 非授权页面显示完整布局 -->
<div class="wrapper" *ngIf="!isAuthPage">
  <div class="sidebar" data-color='blue' data-image="">
    <app-sidebar></app-sidebar>
    <div class="sidebar-background" style="background-image: url(../assets/img/sidebar.jpg)"></div>
  </div>
  <div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </div>
</div>

<!-- 授权页面直接显示内容，不加载布局组件 -->
<router-outlet *ngIf="isAuthPage"></router-outlet>

步骤2：在app.component.ts中监听路由 #

注入Router，监听路由变化，判断当前页面是否属于授权页面：

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 {
  isAuthPage = false;
  // 这里列出所有需要隐藏布局的授权路由
  authRoutes = ['/sign-in', '/sign-up', '/forgot-password'];

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由导航结束事件，更新页面状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.isAuthPage = this.authRoutes.some(route => event.url.includes(route));
    });
  }
}

方案二：使用路由布局组件（推荐，更符合Angular最佳实践） #

这种方法通过路由嵌套来分离布局和页面内容，结构更清晰，扩展性更强，适合中大型项目。

步骤1：创建布局组件 #

新建一个LayoutComponent，把原来的Sidebar、Navbar、Footer和主内容区域放在这里：

<!-- layout.component.html -->
<div class="wrapper">
  <div class="sidebar" data-color='blue' data-image="">
    <app-sidebar></app-sidebar>
    <div class="sidebar-background" style="background-image: url(../assets/img/sidebar.jpg)"></div>
  </div>
  <div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet> <!-- 这里显示带布局的页面内容 -->
    <app-footer></app-footer>
  </div>
</div>

步骤2：配置路由 #

在app-routing.module.ts中，将授权页面直接作为根路由的子组件，而需要布局的页面作为LayoutComponent的子路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// 导入其他页面组件...

const routes: Routes = [
  // 授权页面：直接挂载，不使用布局
  { path: 'sign-in', component: SignInComponent },
  { path: 'sign-up', component: SignUpComponent },
  
  // 带布局的页面：作为LayoutComponent的子路由
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'profile', component: ProfileComponent },
      // 添加其他需要显示布局的页面路由
    ]
  },
  
  // 404路由重定向
  { path: '**', redirectTo: '' }
];

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

步骤3：简化根组件模板 #

修改app.component.html，只保留一个router-outlet，路由会自动根据配置加载对应的布局或授权页面：

<router-outlet></router-outlet>

两种方案对比 #

• 方案一：实现简单，代码改动少，适合小型项目或快速迭代需求，但路由逻辑和根组件耦合度较高。
• 方案二：结构清晰，路由职责分明，扩展性强，新增页面时只需在对应路由节点下添加即可，推荐在中大型项目中使用。

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