将 observable 运行到 zone.js 中

Question

我有一个 GPS 插件，可提供角度区域之外的位置。因此，angular 不会检测到这些变化，并且视图会保持相同的值。

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

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

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

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

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

我怎么能让这个 observable 在一个角度区域内运行？

Answer 1

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

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);
    });
  };
}

然后可以将运算符添加到 observable，让您明确何时更改区域上下文。

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

Answer 2

似乎有一个专门用于rxjs 和区域的插件：

该区域可以使用绑定到任何 rxjs 流

.enterZone(this.ngZone)

或使用管道运算符：

.pipe(enterZone(this.ngZone))