什么是角2

Question

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

Answer 1

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

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

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

框架，如角度，需要知道什么时候所有的应用程序的 工作已经完成，并执行DOM更新在主机环境 执行像素呈现之前。实际上，这意味着当主任务和相关联的任务已经执行但在VM将控制权移交给主机之前，框架感兴趣。

角使用带补丁的API异步（的addEventListener，setTimeout的（），...），并使用通知这些补丁API的运行变化检测每个一些异步事件发生的时间。

对于该角区具有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

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

Answer 2

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>

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

在这里，我们创建了我们当前区域的分支，并运行调用区域下的方法。该方法有一个异步调用（setTimeout）。但是因为它在区域内，所以我们可以访问区域变量。在最后一行，我们可以看到我们试图访问同一个变量的区域，但是它会有未定义的区域。

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

角2是利用Zonejs的变化检测。每当发生任何变化，它是由在角2下面的代码检测 -

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

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

角区发射onTrunDone事件开始变化检测中的应用程序。

Answer 3

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