如何在同一Angular组件中切换显示不同的头部标题

问题根因 #

初始标题My Title所在的面包屑容器没有绑定任何显示隐藏条件，无论spinners.search的值如何变化，这个区块都会持续渲染。仅搜索完成后的第二个标题加了*ngIf="!spinners.search"的判断，所以会出现两个标题同时存在、无法切换的问题。

修复步骤 #

1. 给初始标题的容器添加显示条件，仅当spinners.search为true（未发起搜索/搜索中）时显示：

<!-- 原有初始标题区块，新增*ngIf判断即可 -->
<div class="breadcrumb d-flex justify-content-between" *ngIf="spinners.search">
   <h1>My Title</h1>
</div>

2. 确认逻辑中的变量赋值正确：

• 在launchSearch方法的搜索成功回调中，将spinners.search设置为false
• 在返回按钮触发的goBack方法中，将spinners.search重置为true，保证返回筛选页时初始标题正常显示

优化建议（可选） #

如果两个面包屑区块仅存在标题、返回按钮的差异，不需要拆分两个独立结构，可以合并为一个动态渲染的区块，减少重复代码：

<div class="breadcrumb d-flex justify-content-between">
   <h1>{{ spinners.search ? 'My Title' : 'My Title 2' }}</h1>
   <button (click)="goBack()" class="btn btn-primary" *ngIf="!spinners.search">
   Back
   </button>
</div>

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