Angular项目如何在router-outlet子组件内隐藏父级app-navigation组件

是可以实现的，常用的有3种实现方式，优先推荐前两种低耦合的方案： #

方案1：通过共享服务控制状态（最常用，耦合度最低） #

这种方式通过全局服务在根组件和子组件之间共享导航栏的显示状态，不会产生组件硬关联。

1. 新建导航状态服务
   执行CLI命令生成服务：
   ng generate service services/navigation
   服务内代码如下：

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

@Injectable({ providedIn: 'root' })
export class NavigationService {
  // 存储导航栏显示状态，默认显示
  private showNavSubject = new BehaviorSubject<boolean>(true);
  public showNav$ = this.showNavSubject.asObservable();

  // 外部调用修改状态的方法
  setNavVisibility(isShow: boolean): void {
    this.showNavSubject.next(isShow);
  }
}

2. 根组件绑定状态
   在AppComponent中注入服务，模板通过*ngIf结合异步管道控制导航栏显示：
   app.component.ts代码：

import { Component } from '@angular/core';
import { NavigationService } from './services/navigation.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  showNav$ = this.navService.showNav$;
  constructor(private navService: NavigationService) {}
}

app.component.html代码：

<app-navigation *ngIf="showNav$ | async"></app-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>

3. 子组件内修改状态
   在需要隐藏导航栏的子组件中，进入时设置隐藏，离开时恢复显示，避免影响其他页面：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { NavigationService } from '../services/navigation.service';

@Component({
  selector: 'app-no-nav-page',
  templateUrl: './no-nav-page.component.html'
})
export class NoNavPageComponent implements OnInit, OnDestroy {
  constructor(private navService: NavigationService) {}

  ngOnInit(): void {
    // 进入页面隐藏导航
    this.navService.setNavVisibility(false);
  }

  ngOnDestroy(): void {
    // 离开页面恢复导航显示
    this.navService.setNavVisibility(true);
  }
}

方案2：通过路由配置控制（适合多页面需要隐藏导航的场景） #

不需要额外建服务，直接在路由中配置隐藏标识，根组件监听路由变化自动判断。

1. 路由添加配置项
   在路由定义中给不需要显示导航的页面添加data标识：

const routes: Routes = [
  // 其他正常页面路由
  {
    path: 'no-nav-page',
    component: NoNavPageComponent,
    data: { hideNavigation: true } // 自定义隐藏标识
  }
];

2. 根组件监听路由变化
   在AppComponent中监听路由事件，获取当前路由的配置标识来控制导航显示：

import { Component } from '@angular/core';
import { Router, ActivationEnd, Event } from '@angular/router';
import { filter, map } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  showNavigation = true;
  constructor(private router: Router) {
    this.router.events.pipe(
      // 只过滤路由激活完成的事件
      filter((event: Event): event is ActivationEnd => event instanceof ActivationEnd),
      // 只取最内层子路由的配置
      filter((event: ActivationEnd) => event.snapshot.firstChild === null),
      // 提取隐藏标识，默认不隐藏
      map((event: ActivationEnd) => event.snapshot.data?.['hideNavigation'] ?? false)
    ).subscribe(hideNav => {
      this.showNavigation = !hideNav;
    });
  }
}

app.component.html绑定逻辑和方案1一致：

<app-navigation *ngIf="showNavigation"></app-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>

方案3：直接操作DOM（仅适合临时调试，不推荐生产环境使用） #

如果只是临时需要实现，不想改上层逻辑，可以在子组件内直接操作DOM隐藏导航栏，缺点是耦合度高，服务端渲染场景下会报错。
子组件代码如下：

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-no-nav-page',
  templateUrl: './no-nav-page.component.html'
})
export class NoNavPageComponent implements OnInit, OnDestroy {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    const navElement = this.document.querySelector('app-navigation');
    if (navElement) {
      (navElement as HTMLElement).style.display = 'none';
    }
  }

  ngOnDestroy(): void {
    const navElement = this.document.querySelector('app-navigation');
    if (navElement) {
      (navElement as HTMLElement).style.display = 'block';
    }
  }
}

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