OnPush策略下订阅Ngrx Store时DOM与实际值不一致是什么原因？

问题根因 #

你的问题核心是 回调执行脱离了Angular的NgZone上下文，导致即使组件属性引用发生了变更，OnPush策略的变更检测器没有收到更新信号，因此不会触发模板重渲染：

• Ngrx的不可变特性确实保证了每次状态更新都是新引用，你的控制台日志也验证了这一点，但OnPush自动触发变更检测的前提是：变更发生在Angular可感知的上下文（被NgZone捕获的异步事件、组件内部事件、输入属性变更、Async Pipe更新等）。
• 你用到的_testPortalService.getTestInstructions的回调函数，内部应该使用了未被NgZone patch的异步API（比如原生Fetch、第三方SDK回调、自定义未托管的异步逻辑），导致回调里触发的Ngrx状态更新、以及后续store select的订阅回调，都运行在Angular的Zone之外，Angular不会自动触发全局变更检测，OnPush组件自然不会更新。

解决方案（按优先度排序） #

1. 使用async管道托管Observable（最推荐，符合Angular+Ngrx最佳实践） #

直接在模板中使用async管道订阅store的Observable，不用手动订阅，async管道会自动处理订阅/销毁，且每次Observable推送新值时会自动调用markForCheck触发OnPush组件更新：

// 组件中替换原有手动订阅逻辑
initDataLoadState$ = this._store.select(instructionSelects.selectInitDataLoadState);
landingData$ = this._store.select(instructionSelects.selectLandingData);

<!-- 模板中修改绑定 -->
{{ (initDataLoadState$ | async)?.state }}

这个方案还能省去untilDestroyed的手动内存释放处理，完全避免订阅泄漏。

2. 手动标记组件为需要检测 #

如果需要保留手动订阅的逻辑，注入ChangeDetectorRef，在订阅回调赋值后手动标记组件脏：

// 导入并注入ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef, /* 其他原有注入 */) {
  this._store
    .select(instructionSelects.selectInitDataLoadState)
    .pipe(untilDestroyed(this))
    .subscribe((initDataLoadState) => {
      console.log('is same ref?:', this.initDataLoadState === initDataLoadState)
      this.initDataLoadState = initDataLoadState;
      // 手动标记组件需要变更检测
      this.cdr.markForCheck();
      console.log(initDataLoadState)
      console.log('----------')
    });
  // landingData的订阅也需要加相同的markForCheck逻辑
}

3. 将回调逻辑包裹进NgZone上下文 #

如果要从根源解决异步上下文丢失的问题，将getTestInstructions的回调逻辑用NgZone.run包裹，保证内部逻辑运行在Angular的上下文中：

// 导入并注入NgZone
import { NgZone } from '@angular/core';
constructor(private _ngZone: NgZone, /* 其他原有注入 */) {}

loadInstructions() {
  this._store.dispatch(instructionActions.setInitData());
  this._testPortalService.getTestInstructions(
    this._activatedRoute.snapshot.params.quizOrInviteId,
    (error, response) => {
      // 包裹进NgZone上下文
      this._ngZone.run(() => {
        if (error) {
          this._store.dispatch(instructionActions.setInitDataFail({ errmsg: error.toString() }));
        } else {
          this._store.dispatch(instructionActions.setInitDataSuccess({ instructions: response }));
          console.log(response);
        }
      })
    }
  );
}

内容的提问来源于stack exchange，提问作者Rahul R Badenkal