如何根据路由控制Angular Header组件部分内容的显示？

要实现仅在部分路由中显示Header组件的指定区域、不在/tela-de-escolha路由显示的需求，可借助Angular的Router服务监听当前路由，通过*ngIf指令控制DOM元素的显示状态：

步骤1：在Header组件中注入Router服务 #

首先在组件类中导入并注入Router服务，以便在模板或类中获取当前路由信息：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  unidadeAtendimento: number | null = null; // 保留你原有的变量

  constructor(public router: Router) {} // 注入Router，用public修饰方便模板直接访问

  logout() {
    // 保留你原有的登出逻辑
  }
}

步骤2：用*ngIf控制目标区域的显示 #

修改Header组件的模板代码，将需要控制显示的区域用*ngIf包裹，判断当前路由不等于/tela-de-escolha：

<div id="cabecalho" class="p-2">
<div class="row">
<div class="col mt-2">
  <div *ngIf="this.unidadeAtendimento == 8">
    <img src="../../../assets/imagens/logo-stl-removebg-preview.png" alt="logo-stl" class="logo-stl mt-1"/>
  </div>
</div>
<!-- 用*ngIf控制该区域的显示 -->
<div *ngIf="router.url !== '/tela-de-escolha'">
  <div class="col text-center mt-2">
    <a [routerLink]="['/lista-contas']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento }">
      <i class="bi bi-receipt"></i>
      <p>
        Contas
      </p>
    </a>
  </div>
  <div class="col text-center mt-2">
  <a [routerLink]="['/cti/home']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
      <i class="bi bi-hospital"></i>
      <p>
        Internação
      </p>
    </a>
  </div>
  <div class="col text-center mt-2">
    <a [routerLink]="['/tela-upload']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
      <i class="bi bi-upload"></i>
      <p>
        Upload
      </p>
    </a>
  </div>
</div>
<!-- 控制区域结束 -->
<div class="col text-end" *ngIf="this.unidadeAtendimento != null">
  <button class="btn btn-danger mt-3 me-5" (click)="logout()">Sair</button>
</div>

补充场景处理 #

如果路由可能携带查询参数（如/tela-de-escolha?param=1），可以改用包含判断的条件：

<div *ngIf="!router.url.includes('/tela-de-escolha')">
  <!-- 目标区域内容 -->
</div>

若需要更复杂的路由判断逻辑，也可在组件类中监听路由变化，维护一个状态变量：

isHidden = false;

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 判断当前路由是否为目标隐藏路由
      this.isHidden = event.urlAfterRedirects.includes('/tela-de-escolha');
    }
  });
}

模板中使用该变量控制显示：

<div *ngIf="!isHidden">
  <!-- 目标区域内容 -->
</div>

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