RxJS Subscription触发但Angular不渲染绑定结果及变更检测最佳实践咨询

核心问题结论 #

ChangeDetectionStrategy.OnPush 是Angular官方推荐的性能优化最佳实践，完全可以和RxJS搭配使用，不存在和RxJS适配性差的问题，你遇到的渲染滞后问题是未遵循OnPush的变更检测触发规则导致的。

问题原因解释 #

OnPush策略下，Angular仅在以下4种场景触发组件的变更检测：

• 组件的@Input()属性的引用发生变更
• 组件自身或子组件触发了DOM交互事件（如点击、输入、滚动等）
• 手动调用ChangeDetectorRef的markForCheck()方法标记组件需要更新
• 模板中使用async管道订阅的Observable发出新值

你当前在subscribe回调中直接为this.devices赋值的操作，不满足上述任何一个触发条件，所以变更检测器不会主动刷新视图。你看到的「第二次渲染第一次结果」的现象，是因为第二次操作时触发了DOM事件等其他变更检测周期，才把上一次的赋值结果同步到视图上，属于偶发的巧合，不是正常逻辑。

你测试的两个操作的原理说明：

• 用push方法更新数组不可行：push是修改原有数组的内容，数组引用没有变更，就算触发变更检测也不会触发OnPush的更新逻辑，更不用说你连变更检测都没有触发。
• 把devices = []改为仅声明不赋值就正常运行属于巧合：大概率是初始未定义状态下第一次赋值触发了隐式的检测逻辑，或者你其他操作刚好触发了变更检测，这种方案不可靠，不建议在生产环境使用。

正确解决方案 #

方案1（最推荐，RxJS + OnPush原生适配）：使用async管道 #

不需要手动订阅Observable，async管道会自动处理订阅、销毁逻辑，且每次Observable发出新值时会自动触发OnPush变更检测：

// 组件内定义Observable
devices$: Observable<Device[]>;

getPlants(pageNewDevice:number, pageDevice:number):void {
    if(pageDevice < 0 || pageNewDevice < 0) return;
    this.devices$ = this.staticDeviceService.getPlants(pageNewDevice, pageDevice).pipe(
      map(resPlants => resPlants.deviceList)
    );
}

模板中直接订阅：

<div *ngFor="let device of devices$ | async">
  <!-- 你的渲染逻辑 -->
</div>

方案2（适合需要手动处理订阅逻辑的场景）：手动标记变更检测 #

注入ChangeDetectorRef，赋值完成后手动标记组件需要更新：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

getPlants(pageNewDevice:number, pageDevice:number):void {
    if(pageDevice < 0 || pageNewDevice <0){
      return;
    }
    this.subscription = this.staticDeviceService.getPlants(pageNewDevice, pageDevice).subscribe((resPlants)=>{
      console.log("write console")
      this.devices = resPlants.deviceList
      // 新增一行，标记组件需要在下一个变更检测周期更新
      this.cdr.markForCheck();
    })
}

实践建议 #

默认的ChangeDetectionStrategy是全组件树脏检查，中大型应用下性能损耗非常明显，OnPush可以跳过无更新必要的组件渲染，大幅提升应用性能，只要遵循其触发规则，完全可以作为所有组件的默认策略使用，和RxJS的适配性非常好。

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