Angular 6中subscribe内修改变量后视图未更新的问题

这问题我之前升级项目的时候也碰到过，折腾了好一阵才摸透根源，咱们一步步拆解：

为什么Angular 5里没问题，Angular 6就需要手动触发变更检测？ #

核心原因是RxJS 6与Zone.js的适配逻辑变了：

• 在Angular 5搭配RxJS 5.x时，Zone.js会自动拦截几乎所有RxJS的异步操作（包括subscribe的回调），一旦异步任务完成，Zone.js会自动触发Angular的变更检测，视图就能同步更新变量值。
• 但RxJS 6重构了内部实现，部分Observable的创建/执行逻辑脱离了Zone.js的监控范围（比如第三方库返回的Observable、或是用new Observable()手动创建且未在Zone内执行的流）。这时候subscribe的回调会在Angular的变更检测周期之外运行，修改组件变量后，Angular完全不知道需要更新视图，就出现了控制台打印正确但视图没变化的矛盾情况。

你手动调用ChangeDetectorRef.detectChanges()能生效，是因为这个方法强制Angular执行一次变更检测，把最新的变量值同步到视图上，但这只是临时的 workaround，绝非最优解。

正确的解决方法（按推荐程度排序） #

1. 使用async管道（最推荐） #

这是Angular官方最推崇的方案，它会自动帮你处理订阅、取消订阅，而且每次Observable发射新值时，都会自动触发变更检测，完全不用手动操心。

修改示例：

• 组件代码调整：

  testVariable$: Observable<string>;
  
  ngOnInit() {
    // 用startWith初始化初始值，再通过map追加后续内容
    this.testVariable$ = this.someService.someObservable.pipe(
      startWith('foo-Hello'),
      map(() => `${this.testVariable$}-bar`)
    );
  }
  

• 模板直接使用async管道：

  <div>{{ testVariable$ | async }}</div>
  

2. 用NgZone把回调包裹在Angular变更检测周期内 #

如果必须保留手动订阅的写法，可以注入NgZone，把更新变量的逻辑放到ngZone.run()里，强制让代码运行在Zone内，触发变更检测：

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

constructor(private ngZone: NgZone) {}

ngOnInit() {
  this.testVariable = 'foo-Hello';
  this.someService.someObservable.subscribe(() => {
    this.ngZone.run(() => {
      this.testVariable += '-bar';
    });
  });
}

3. 确保Observable在Zone内创建 #

如果someService.someObservable是你自己实现的，可以在创建Observable时，把执行逻辑放到Zone内，从根源上避免问题：

// 在someService中
constructor(private ngZone: NgZone) {}

someObservable: Observable<any> = new Observable(observer => {
  this.ngZone.run(() => {
    // 这里写你的异步逻辑，比如API请求、定时器等
    observer.next();
    observer.complete();
  });
});

注意：避免滥用detectChanges()或markForCheck() #

虽然手动调用变更检测方法能解决问题，但频繁使用会导致不必要的性能开销，尤其是在大型组件树里。只有在处理完全不受控的第三方异步流时，才考虑作为最后的备选方案。

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