运行一个可观察到 zone.js

Question

我有一个 GPS 插件，可提供 angular 区域外的位置。因此，angular 未检测到更改，并且视图保持相同的值。

当然，我可以从控制器订阅这个 observable 并做类似的事情。

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

视图将简单地使用如下值：

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

但我想避免必须订阅控制器并使用命令式方式。

我怎样才能在 angular 区域内对运行进行观察？

Answer 1

好像有专用于rxjs and zones:

的插件

区域可以使用

绑定到任何 rxjs 流

.enterZone(this.ngZone)

或使用管道运算符：

.pipe(enterZone(this.ngZone))

Answer 2

你也可以试试这个补丁。在 import zone.js.

之后在 polyfills.ts 内添加这一行

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

Running an observable into a zone.js

rxjs

zone.js

angular

运行一个可观察到 zone.js