Angular基于路由子组件控制父组件侧边栏/页脚显隐

方案1：利用路由元数据（Route Data） #

这种方式无需子组件额外编写逻辑，直接在路由配置中定义显示规则，父组件通过监听路由事件读取配置。

1. 在路由配置里为每个路由添加data字段，指定showSidebar和showFooter的布尔值：

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { showSidebar: true, showFooter: true } },
  { path: 'login', component: LoginComponent, data: { showSidebar: false, showFooter: false } },
  { path: 'profile', component: ProfileComponent, data: { showSidebar: true, showFooter: false } },
];

2. 父组件注入Router和ActivatedRoute，订阅路由数据变化来更新显示状态：

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

@Component({
  selector: 'app-root',
  template: `
    <app-sidebar *ngIf="showSidebar"></app-sidebar>
    <router-outlet></router-outlet>
    <app-footer *ngIf="showFooter"></app-footer>
  `
})
export class AppComponent implements OnInit {
  showSidebar = true;
  showFooter = true;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        let route = this.activatedRoute.firstChild;
        while (route?.firstChild) {
          route = route.firstChild;
        }
        return route?.data || {};
      })
    ).subscribe(data => {
      this.showSidebar = data['showSidebar'] ?? true; // 默认显示侧边栏
      this.showFooter = data['showFooter'] ?? true;   // 默认显示页脚
    });
  }
}

方案2：子组件主动通知父组件 #

如果需要子组件动态控制布局（比如执行某些操作后才隐藏侧边栏），可以通过组件实例通信实现。

1. 子组件定义公共属性或输出事件：

// 登录页子组件示例
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `<p>登录页面</p>`
})
export class LoginComponent implements OnInit {
  // 方式A：直接定义公共状态属性
  public showSidebar = false;
  public showFooter = false;

  // 方式B：用输出事件支持动态变更
  @Output() layoutChange = new EventEmitter<{showSidebar: boolean, showFooter: boolean}>();

  ngOnInit() {
    // 初始化时发送布局状态（如果用输出事件）
    this.layoutChange.emit({showSidebar: false, showFooter: false});
  }
}

2. 父组件通过router-outlet的activate事件获取子组件实例，读取或订阅状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-sidebar *ngIf="showSidebar"></app-sidebar>
    <router-outlet (activate)="onComponentActivate($event)"></router-outlet>
    <app-footer *ngIf="showFooter"></app-footer>
  `
})
export class AppComponent {
  showSidebar = true;
  showFooter = true;

  onComponentActivate(component: any) {
    // 读取子组件的公共属性
    if (component.showSidebar !== undefined) {
      this.showSidebar = component.showSidebar;
    }
    if (component.showFooter !== undefined) {
      this.showFooter = component.showFooter;
    }

    // 订阅子组件的输出事件（支持动态更新）
    if (component.layoutChange) {
      component.layoutChange.subscribe(layout => {
        this.showSidebar = layout.showSidebar;
        this.showFooter = layout.showFooter;
      });
    }
  }
}

方案3：用共享服务统一管理布局状态 #

适合复杂场景，当多个组件需要修改或响应布局状态时使用。

1. 创建布局管理服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  private readonly _showSidebar$ = new BehaviorSubject<boolean>(true);
  private readonly _showFooter$ = new BehaviorSubject<boolean>(true);

  showSidebar$ = this._showSidebar$.asObservable();
  showFooter$ = this._showFooter$.asObservable();

  setShowSidebar(show: boolean) {
    this._showSidebar$.next(show);
  }

  setShowFooter(show: boolean) {
    this._showFooter$.next(show);
  }
}

2. 子组件注入服务，设置布局状态：

// 登录页子组件示例
import { Component, OnInit, OnDestroy } from '@angular/core';
import { LayoutService } from './layout.service';

@Component({
  selector: 'app-login',
  template: `<p>登录页面</p>`
})
export class LoginComponent implements OnInit, OnDestroy {
  constructor(private layoutService: LayoutService) {}

  ngOnInit() {
    this.layoutService.setShowSidebar(false);
    this.layoutService.setShowFooter(false);
  }

  // 组件销毁时恢复默认布局（可选）
  ngOnDestroy() {
    this.layoutService.setShowSidebar(true);
    this.layoutService.setShowFooter(true);
  }
}

3. 父组件注入服务，订阅状态变化：

import { Component } from '@angular/core';
import { LayoutService } from './layout.service';

@Component({
  selector: 'app-root',
  template: `
    <app-sidebar *ngIf="showSidebar | async"></app-sidebar>
    <router-outlet></router-outlet>
    <app-footer *ngIf="showFooter | async"></app-footer>
  `
})
export class AppComponent {
  showSidebar = this.layoutService.showSidebar$;
  showFooter = this.layoutService.showFooter$;

  constructor(private layoutService: LayoutService) {}
}

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