Angular中访问/admin路由不显示header与footer的最佳实践

方案1：分层路由布局（推荐最佳实践） #

该方案完全解耦不同业务线的公共布局，扩展性强，符合Angular路由的设计理念，是中大型项目的标准实现方式：

• 第一步：新增布局组件
  新建layout目录，存放两类布局组件：
  • front-layout.component.html（前台公共布局，保留原有头尾）

    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
    

  • admin-layout.component.html（后台专属布局，无需头尾）

    <router-outlet></router-outlet>
    

  两个布局组件可声明在shared模块或者单独的layout模块中，确保根模块可以调用。
• 第二步：调整根路由配置（app.routing.module.ts）
  采用路由嵌套结构绑定对应布局，同时保留Admin模块的懒加载逻辑：

  const routes: Routes = [
    // 前台路由组，绑定前台布局
    {
      path: '',
      component: FrontLayoutComponent,
      children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        // 前台路由可直接配置，也可懒加载pages模块
        { path: 'home', component: HomeComponent },
        { path: 'products', component: ProductsComponent }
        // 懒加载写法：{ path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }
      ]
    },
    // 后台路由组，绑定后台布局，懒加载Admin模块
    {
      path: 'admin',
      component: AdminLayoutComponent,
      loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
    }
  ];
  

• 第三步：修改根组件模板
  把app.component.html中原有的头尾删除，只保留根路由出口：

  <router-outlet></router-outlet>
  

该方案无需修改原有Admin模块的内部路由，后续新增其他布局（比如会员中心专属布局）直接新增布局组件即可，模块边界清晰，维护成本极低。

方案2：路由判断显隐（小型项目快速实现） #

如果项目规模很小，不想新增布局组件，可通过路由判断快速实现：

• 第一步：在app.component.ts中监听路由变化

  import { Router, NavigationEnd } from '@angular/router';
  import { filter } from 'rxjs';
  
  export class AppComponent {
    showHeaderFooter = true;
  
    constructor(private router: Router) {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe((event: NavigationEnd) => {
        this.showHeaderFooter = !event.url.startsWith('/admin');
      });
    }
  }
  

• 第二步：修改app.component.html，用*ngIf控制头尾显隐

  <app-header *ngIf="showHeaderFooter"></app-header>
  <router-outlet></router-outlet>
  <app-footer *ngIf="showHeaderFooter"></app-footer>
  

该方案实现成本低，但后续如果新增更多不需要头尾的路由，判断逻辑会越来越臃肿，耦合性高，不适合长期迭代的项目。

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