Angular 2 : what make a service to be "Outside" angular zone?

Question

在 StackOverflow 上遇到与许多人相同的问题后，我无法理解什么是“外部 Angular 区域”服务？

我已经检查了围绕这个主题的所有现有问题，这正是我需要问这个问题的原因:

https://github.com/angular/angular/issues/5150

Angular2: view is not updated from inside a subscription

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

http://blog.assaf.co/angular-2-change-detection-zones-and-an-example/

具有默认 ChangeDetectionStrategy 的任何组件中的代码示例:
(考虑到 this.value 在 View 中引用)

this.myService.method().subscribe(e => {
    this.value = e;
  });

是给定的服务 不是 “外 Angular 区”， View 是 刷新，另一方面，如果 它是 “外 Angular 区”， View 不是 刷新， 除非我们调用 ChangeDetectorRef.detectChanges()。

所以问题是:知道服务是在“Angular 区”内部还是外部的条件是什么？

Answer 1

你想要的代码是NgZone.isInAngularZone() .这会告诉你它是否在那里执行。

资料来源:在写这篇文章之前，我花了好几个小时阅读 Angular 文档。

此外，您可以注入(inject) NgZone进入您的服务并尝试使用this.ngZone.run(() => yourSubscriberCallback())这应该会有所帮助，尽管我尝试这个的结果很复杂。

编辑:好的，我设法让我的东西正常工作，让我们看看它是否对你有帮助。

在我的例子中，我使用了一个第三方库，其中包括一个监听器来进行更改。我使用的是 RXJS BehaviorSubject通过服务将这些更改传播到各个组件，但这些更改没有被拾取。

原来这是因为我在监听器中使用的方法是在 AngularZone 之外执行的。

起初我是这样做的:

export class Service {

  public BehaviorSubject<Thing> thingSubject = new BehaviorSubject<Thing>(new Thing());

  constructor(private ngZone:NgZone) {
    thirdPartyLibrary.listen(ngZone.run(() => myCallback.bind(_this)));
  }

  ...

}

和 myCallback正在做:

myCallback(thing) {
  this.thingSubject.next(thing);
}

事实证明，这似乎没有在 Angular Zone 内正确执行。我把我的代码改成了这个，它起作用了:

export class Service {

  public BehaviorSubject<Thing> thingSubject = new BehaviorSubject<Thing>(new Thing());

  constructor(private ngZone:NgZone) {
    thirdPartyLibrary.listen(myCallback.bind(_this));
  }

  myCallback(thing) {
    this.ngZone.run(() => this.thingSubject.next(thing));
  }

}

之后，我的所有订阅者都在 Angular Zone 内收到了消息并触发了预期的更新。