是否可以使用'ngZone：'noop''来表示角度中的特定功能/组件？

Question

我使用第三方库在Angular（版本5）中生成PPT，第三方库有很多异步调用和承诺，因此zone.js跟踪运行超过50个循环，它降低了应用程序的性能。

为了提高这一点，对于该特定功能，我不想运行'Zone.js'。

如何以角度实现这一点，任何人都可以建议/想法实施这个忙碌的。

'index.ts'文件

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZone: 'noop'
});

这对整个应用程序禁用，我需要为特定功能实现相同的功能。

Answer 1

你可以做的是将你的第三方包裹在NgZone.runOutsideAngular(fn)。

constructor(private zone: NgZone) {}

mouseDown(event) {
  this.element = event.target;

  this.zone.runOutsideAngular(() => {
    window.document.addEventListener('mousemove', this.mouseMove.bind(this));
  });
}

但是我最近尝试用three.js做这个，但是效果不好。

所以另一个选择是告诉zone.js不跟踪某些事件。

您需要做的是在src文件夹中创建一个名为ngzone-flags.ts的新文件（名称无关紧要），您可以在polyfills.ts文件的顶部导入该文件。

您不能直接在polyfills.ts中使用代码，因为webpack会将所有导入放在文件的顶部，这将使zone.js导入到配置之前。

在ngzone-flags.ts文件中你应该有：

(window as any).__Zone_disable_requestAnimationFrame = true;
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'touchmove'];

这将告诉zone.js不挂钩这些事件。

要检查它是否有效，您可以使用chrome中的性能面板并运行一段时间，然后检查每个请求动画帧的callstack。那里不应该调用zone.js。

更新

您可以添加更多配置变量。你可以在这里找到完整的清单：https://github.com/angular/zone.js/blob/master/MODULE.md