Question

我有一个GPS插件，可提供角度区域以外的位置。因此，无法通过角度检测到这些变化，并且视图始终保持相同的值。

当然，我可以从控制器中订阅此可观察的内容，并执行类似的操作。

$mySourceOutOfZone.subscribe((value)=>{
            this.zone.run(() => {
                this.value = value;
            });
})

视图将仅使用类似以下的值：

<span>{{value}}</span>

但是我想避免不得不订阅控制器并使用命令式样式方式。

我怎样才能让这个可观察物在一个角区域内运行？

Answer 1

似乎有一个专用于rxjs and zones:

的插件

可以使用.enterZone(this.ngZone)

将区域绑定到任何rxjs流。

Answer 2

您也可以尝试此补丁。导入polyfills.ts之后，在zone.js内添加此行。

import `zone.js/dist/zone-patch-rxjs`;

因此，subscription callback会在调用.subscribe时在区域中运行。

Answer 3

使用RxJs 6+时，自定义管道操作员可以将可观察对象的行为包装在指定区域的zone.run()中。

import { Observable, OperatorFunction } from 'rxjs';
import { NgZone } from '@angular/core';

export function runInZone<T>(zone: NgZone): OperatorFunction<T, T> {
  return (source) => {
    return new Observable(observer => {
      const onNext = (value: T) => zone.run(() => observer.next(value));
      const onError = (e: any) => zone.run(() => observer.error(e));
      const onComplete = () => zone.run(() => observer.complete());
      return source.subscribe(onNext, onError, onComplete);
    });
  };
}

然后可以将运算符添加到一个可观察对象中，让您明确何时更改区域上下文。

return exampleObservable.pipe(
  runInZone(this.zone)
);

将可观察对象运行到zone.js中

3 个答案: