为什么Angular服务内的布尔值更新后，HTML页面没有同步变化？

• 服务实例不唯一：如果StepService在父组件或子组件的providers数组中单独注册，父子组件拿到的是不同的服务实例，子组件修改的服务变量不会同步到父组件使用的实例上。
• 变更检测未触发：如果父组件使用了ChangeDetectionStrategy.OnPush变更检测策略，服务中普通变量的修改不会自动触发父组件的视图更新，OnPush策略仅在输入属性变化、组件内部事件触发、异步流推送新值时才会运行变更检测。

第一步：确认服务为全局单例 #

确保StepService使用根注入器注册，不要在父子组件的providers中重复声明：

@Injectable({
  providedIn: 'root' // 直接注册到根注入器，全局唯一实例
})
export class StepService {
  // 原有逻辑
}

第二步：使用RxJS流管理状态（推荐） #

用BehaviorSubject包装状态变量，配合Angular的async管道自动触发变更检测，无需手动处理变更检测逻辑：

修改StepService代码 #

import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class StepService {
  // 私有Subject存储状态，不对外暴露避免直接修改
  private _beneficiary = new BehaviorSubject<boolean>(true);
  // 公开Observable供外部订阅
  public beneficiary$ = this._beneficiary.asObservable();

  private _children = new BehaviorSubject<boolean>(true);
  public children$ = this._children.asObservable();

  changeProduct() {
    const product = localStorage.getItem("product");
    // 切换产品时自动重置状态
    this._beneficiary.next(product !== 'ci');
    this._children.next(product !== 'life');
  }
}

修改父组件HTML代码 #

用async管道订阅流，自动处理订阅销毁和变更检测触发：

<div class="filled" *ngIf="stepService.children$ | async">
...
</div>

<div class="filled" *ngIf="stepService.beneficiary$ | async">
...
</div>

临时替代方案 #

如果不想改动服务逻辑，可以在父组件中注入ChangeDetectorRef，在子组件触发done事件后手动调用markForCheck()触发变更检测，不推荐长期使用。

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