Angular 2，使用 ngZone.runOutsideAngular 和 requestAnimationFrame 循环

Question

根据我在网上阅读的内容，Angular 团队建议您始终在 Angular 区域之外调用 requestAnimationFrame()，如下所示:

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp || new Date().getTime();
    this.myAnimeMethod(timestamp);
  });
});

但是循环呢...

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp;
    this.myAnimeMethod(timestamp, timerStart);
  });
});

myAnimeMethod(timestamp, timerStart) {
  let time = timestamp || new Date().getTime();
  let runtime = time - timerStart;

  /// animation logic here

  if(runtime < 10000) {

    // ------- continue to animate for 10 seconds -- //

    requestAnimationFrame(timestamp => {
      this.myAnimeMethod(timestamp, timerStart);
    });
  }
}

是否足以在第一个请求中调用 this.ngZone.runOutsideAngular() 或者我应该在 中再次调用 this.ngZone.runOutsideAngular() >myAnimeMethod() 像这样吗？

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp;
    this.myAnimeMethod(timestamp, timerStart);
  });
});

myAnimeMethod(timestamp, timerStart) {
  let time = timestamp || new Date().getTime();
  let runtime = time - timerStart;

  /// animation logic here

  if(runtime < 10000) {

    // ------- request to run outside of Angular again while continuing to animate for 10 seconds -- //

    this.ngZone.runOutsideAngular(() => {
      requestAnimationFrame(timestamp => {
        this.myAnimeMethod(timestamp, timerStart);
      });
    });

  }
}

Answer 1

简短回答:您不需要继续从来自 Angular 外部调用的 requestAnimationFrame 处理程序调用 NgZone.runOutsideAngular。

长答案:一旦你进入“根”区域(这是你调用 NgZone.runOutsideAngular 时得到的)，任何 requestAnimationFrame 回调也将运行来自那个区域，除非你明确请求一个不同的区域，例如通过 NgZone.run。

要检查这一点，请尝试从您的 requestAnimationFrame 处理程序调用静态函数 NgZone.isInAngularZone()。

请注意，我使用 Angular 4.4.4 和 Zone.js 0.8.18 对此进行了测试。