Angular组件点击span后文本切换渲染失效问题求助

• 确保emptyLocationSearched为Angular信号类型，而非普通变量：
  在组件类中导入并定义信号：

  import { signal } from '@angular/core';
  
  // 初始值设为false
  emptyLocationSearched = signal(false);
  

• 修正searchEmptyLocation()方法的更新逻辑，使用信号的set方法修改值：

  searchEmptyLocation() {
    this.emptyLocationSearched.set(true);
  }
  

• 调整模板中的@if语法，注意信号需通过调用()获取当前值：

  @if (!emptyLocationSearched()) {
    <p>{{landmarkSentence}}<span class="location" (click)="searchEmptyLocation()">{{currentLandmark.name}}</span>.</p>
  } @else {
    <p>You search {{currentLandmark.name}} thoroughly, but find nothing</p>
  }
  

关键说明 #

Angular 18默认采用信号驱动的变更检测机制，普通变量的更新不会自动触发视图刷新。使用信号可确保变量变更时，框架自动检测并更新对应的@if分支渲染。若坚持使用普通变量，需注入ChangeDetectorRef并手动调用detectChanges()，但信号是官方推荐的最优方案。

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