Question

目前正在学习 Angular 2.0 ，我来到 Zone.js 文件，我想知道的目的是什么文件Zone.js以及它如何使我的应用程序更好。

Answer 1

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

我认为在angular2中使用zonejs的主要目的是知道何时渲染。

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

框架，例如Angular，需要知道所有应用程序的时间工作已完成并在主机环境之前执行DOM更新执行像素渲染。在实践中，这意味着框架是主要任务和相关微观感兴趣任务已执行但在VM将控制权移交给之前主机。

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也可用于调试，测试和分析。如果您遇到一些错误，它可以帮助您查看整个调用堆栈。

区域补丁异步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

中的工作原理

Answer 2

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

示例 -

＆＃13;

UserName

＆＃13;

<input type="text" name="UserId" value="<?php echo $UserName = odbc_result($sql,'UserName');  ?>"></td>

＆＃13;

注意：Plz，忽略控制台错误。此代码在jsfiddle中正常工作 - https://jsfiddle.net/subhadipghosh/0uqc9rdr/

这里我们创建了当前Zone的一个fork，并且run正在调用Zone下的方法。该方法具有异步调用（setTimeout）。但由于它在区域内，我们可以访问Zone变量。在最后一行中，我们可以看到我们试图访问相同变量的区域，但它将在其中未定义。

原帖 - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html

Angular 2正在利用Zonej进行变化检测。无论何时发生任何变化，都可以通过Angular 2中的以下代码进行检测 -

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);

Angular zone会发出onTurnDone事件，以便在应用中启动更改检测。

Answer 3

在简单语言中，Zone.js是一个api或一组程序，当发生任何更改时，角度2使用它来更新应用程序视图。 区域是跨异步任务持久存在的执行上下文。例如：事件，XMLHttpRequests和Timers（setTimeout（），setInterval（））等。

Answer 4

Zone.js用于asyn调用，内部用于错误和堆栈跟踪angular2正在使用它。所以你不能忽视这个javascript。

Answer 5

当原生JavaScript操作引发事件时，Angular依赖zone.js来运行Angular的变更检测过程。 Zone.js是TC39委员会目前确定的规范的实现，该委员会确定JavaScript语言的标准。

Angular 2

5 个答案: