角2，使用带有ngZone.runOutsideAngular循环的requestAnimationFrame

Question

根据我在网上所读到的内容，角小组建议您始终在角区域外调用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()就足够了，还是应该像这样在myAnimeMethod()中再次调用this.ngZone.runOutsideAngular()？

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

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

长答案:一旦您处于“根”区域(这是您调用NgZone.runOutsideAngular时得到的)，任何requestAnimationFrame回调都将从该区域运行，除非您显式地请求另一个区域，例如通过NgZone.run。

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

注意，我用角4.4.4和Zone.js 0.8.18测试了这一点。

Answer 2

您还可以制作ngzon-chars.ts，其中放置所有异常以进行更改检测。

// All events inside the BLACK-LIST Array will not trigger updates anymore from angular
// requestAnimationFrame wont trigger change detection
(window as any).__Zone_disable_requestAnimationFrame = true; 
// Same for scroll and mousemove or any other event youll add
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove'];

将该文件导入您的polyfills.ts：

import './ngzone-flags'