什麼是角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。