Angular 2中Zone.js的作用是什么？

Question

我目前正在学习Angular2.0，并遇到了文件Zone.js，想知道该文件的用途以及它如何使我的应用程序更好。

现在学习Angular 2.0，然后遇到了Zone.js文件，请问这个文件的作用是什么，如何提升我的应用程序呢？

- Vengat_93

Answer 1

一个 Zone 是一个执行上下文，它会在异步任务中持续存在，并允许创建者观察和控制该区域内的代码执行。

我认为在 Angular2 中使用 zonejs 的主要目的是为了确定何时进行渲染。

根据 NgZone Primer（第5章：用例 / 用例3：框架自动渲染）

  

框架（例如 Angular）需要知道何时完成所有应用程序工作并在主机环境执行像素呈现之前执行 DOM 更新。实际上，这意味着当主任务和相关的微任务已经执行但尚未将控制权交给主机时，框架感兴趣。

Angular 使用区域来修补异步 API（addEventListener、setTimeout() 等），并使用来自这些已修补 API 的通知，在每次发生一些异步事件时运行变更检测。

为此，Angular 区域具有 onMicrotaskEmpty 事件。

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/zone/ng_zone.ts#L199

并且 ApplicationRef 订阅此事件以触发变更检测（Application.tick）。

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/application_ref.ts#L405-L406

此外，zonejs 对于调试、测试和分析非常有用。如果您遇到某些错误，它可帮助您查看完整的调用堆栈。

Zone 会修补异步 API，例如：

Promise
XHR
fetch
Error
addEventListener
removeEventListener
FileReader
WebSocket
MutationObserver
WebKitMutationObserver
document.registerElement
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition

copy cut paste abort blur focus canplay canplaythrough change click contextmenu 
dblclick drag dragend dragenter dragleave dragover dragstart drop 
durationchange emptied ended input invalid keydown keypress keyup 
load loadeddata loadedmetadata loadstart message 
mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup 
pause play playing progress ratechange reset scroll 
seeked seeking select show stalled submit suspend 
timeupdate volumechange waiting 
mozfullscreenchange mozfullscreenerror mozpointerlockchange 
mozpointerlockerror error webglcontextrestored webglcontextlost webglcontextcreationerror

setTimeout/clearTimeout
setInterval/clearInterval
setImmediate/clearImmediate

requestAnimationFrame/cancelAnimationFrame
mozRequestAnimationFrame/mozCancelAnimationFrame
webkitRequestAnimationFrame/webkitCancelAnimationFrame

alert
prompt
confirm

这篇文章可能有助于理解Angular2的工作原理。

• http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
• http://blog.kwintenp.com/how-the-hell-do-zones-really-work/

- yurzui

Answer 2

Zone.js 是 Angular 变更检测的关键。

Zone 在浏览器中创建了一个包装器，用于包装所有异步操作，例如用户交互、HTTP、定时器和任何可能导致状态变化的其他更改。

Zone 知道这些操作何时完成。Angular 会订阅从 Zone 发出的通知，以便在其中之一完成时运行其变更检测算法并重新渲染任何已更改的内容。

这最小化了任何渲染频繁性，并使其更加高效。

- ArunValaven

Answer 3

Zonejs是Angularjs 2中使用的核心库之一。Zonejs用于维护单级或多级异步方法的上下文执行。因此，它有助于跟踪当前执行异步方法的父上下文。

示例-

Zone.current.fork({}).run(function(){
 Zone.current.myZoneVar = true;
 console.log('Assigned myZoneVar');
 setTimeout(()=>{
   console.log('In timeout', Zone.current.myZoneVar);
 },1000);
});
console.log('Out side', Zone.current.myZoneVar);

<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>

请注意：请忽略控制台错误。这段代码在jsfiddle中运行良好 - https://jsfiddle.net/subhadipghosh/0uqc9rdr/ 在这里，我们创建了当前Zone的分支，并运行调用Zone下的方法。该方法有一个异步调用（setTimeout）。但是由于它在Zone下，我们可以访问Zone变量。在最后一行中，我们可以看到在Zone之外，我们尝试访问相同的变量，但它将具有未定义的值。

原帖 - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html Angular 2正在利用Zonejs进行更改检测。每当发生任何更改时，Angular 2中的以下代码将检测到。

ObservableWrapper.subscribe(this.zone.onTurnDone, () => {
  this.zone.run(() => {
    this.tick();
  });
});

tick() {
  // perform change detection
  this.changeDetectorRefs.forEach((detector) => {
    detector.detectChanges();
  });
}

Angular区域会发出onTurnDone事件来启动应用程序中的变更检测。

- codedip

Answer 4

简单来说，Zone.js是一组API或程序，由Angular 2用于在发生任何更改时更新应用程序视图。

区域是跨异步任务持久存在的执行上下文。 例如:事件、XMLHttpRequest和定时器(setTimeout()、setInterval())等。

- Amit kumar

Answer 5

Zone.js被用于异步调用，同时在Angular 2内部用于错误和堆栈跟踪。因此你不能忽略这个脚本。

- Akshay Kapoor