Angular结合Rxjs使用Capacitor插件：在NgZone上下文处理流

我在使用CapacitorPurchases插件（其他Capacitor插件也可能出现类似情况），它的方法返回带结果的Promise。平时我会这么用：

const result = await CapacitorPurchases.getPurchaserInfo();
this.ngZone.run(()=>{
   // 处理result
});

现在想改用RxJS构建包含switchMap等操作符的复杂流管道，但直接写：

from(CapacitorPurchases.getPurchaserInfo())
 .pipe(switchMap(value=>{
  this.a = value;
  return this.httpService.call()
}))

switchMap里的代码会跑在NgZone上下文之外；如果改成：

from(CapacitorPurchases.getPurchaserInfo())
 .pipe(switchMap(value=>{
  this.ngZone.run(()=>{
   this.a = value;
  })
 return this.httpService.call()
}))

又可能丢失数据。请问有没有办法在流管道里创建NgZone上下文？

方法1：自定义通用NgZone操作符 #

创建一个可复用的RxJS操作符，将流中的所有回调逻辑包裹到NgZone中执行，确保整个管道都处于Angular变更检测上下文内：

import { OperatorFunction } from 'rxjs';
import { tap } from 'rxjs/operators';
import { NgZone } from '@angular/core';

function runInNgZone<T>(zone: NgZone): OperatorFunction<T, T> {
  return tap({
    next: value => zone.run(() => value),
    error: err => zone.run(() => { throw err; }),
    complete: () => zone.run(() => {})
  });
}

使用时，将该操作符插入管道的起始位置（或需要的环节）：

from(CapacitorPurchases.getPurchaserInfo())
  .pipe(
    runInNgZone(this.ngZone),
    switchMap(value => {
      this.a = value; // 此时已处于NgZone上下文内
      return this.httpService.call();
    })
  )
  .subscribe();

方法2：从源头包裹Promise的执行 #

在将Promise转换为Observable时，直接用NgZone.run包裹Promise的调用，让整个流的源头就处于NgZone上下文：

from(this.ngZone.run(() => CapacitorPurchases.getPurchaserInfo()))
  .pipe(
    switchMap(value => {
      this.a = value;
      return this.httpService.call();
    })
  )
  .subscribe();

方法3：在特定操作符内包裹逻辑 #

如果仅需在某个操作符内进入NgZone，可将逻辑和返回的Observable一起包裹到zone.run中：

from(CapacitorPurchases.getPurchaserInfo())
  .pipe(
    switchMap(value => {
      return this.ngZone.run(() => {
        this.a = value;
        return this.httpService.call();
      });
    })
  )
  .subscribe();

补充说明：

• 方法1最适合全流程需要NgZone的场景，避免重复编写zone.run代码；
• 方法2从根源确保流的上下文，后续所有操作符都会继承该环境；
• 方法3针对性强，适合仅某段逻辑需要NgZone的场景；
• 注意你之前代码中from(from(...))是冗余写法，直接from(Promise)即可完成Promise到Observable的转换。

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