Angular 2：什么使服务成为"Outside" angular区？

Question

在遇到与 Whosebug 上许多人相同的问题后，我没能理解什么是 "Outside angular zone" 服务？

我已经检查了关于这个主题的所有现有问题，这正是我需要问这个问题的原因：

具有默认 ChangeDetectionStrategy 的任何组件中的代码示例： （考虑在视图中引用 this.value）

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

是否给定服务不是"Outside angular zone"，视图是刷新，另一方面，如果是"Outside angular zone"，视图没有刷新，除非我们调用ChangeDetectorRef.detectChanges( ).

所以问题是：知道服务是内部还是外部的条件是什么 "Angular Zone"？

Answer 1

据我所知，无法检查某些东西是否运行 "Inside" 或 "Outside" angular 区域。如果您使用 zone.runOutsideAngular 它会在您的区域之外运行。第二个想到：你为什么想知道？

Answer 2

看来我自己找到了答案，但我希望它能对其他人有所帮助:

"Outside Angular Zone" 服务是 class 未在 Angular 上下文中实例化的服务。许多使用静态访问器的库都容易受到这种情况的影响，这是一个例子：

http://techqa.info/programming/question/34592857/view-is-not-updated-on-change-in-angular2

幸运的是，它使用的是同一个库。如该外部资源中所述，设法实例化外部库对象将解决视图刷新问题并让该服务成为 "Inside Angular zone" 一个。

Answer 3

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

资料来源：在写这篇文章之前，我用头撞墙阅读 Angular 文档。

此外，您可以将 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 区域内正确执行。不过，我将我的代码更改为这个并且它起作用了：

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 区域内收到了消息并触发了预期的更新。

Angular 2：什么使服务成为"Outside" angular区？

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

components

zone

observable

angular