Angular 2中Zone.js的用途是什么 [英] what is the use of Zone.js in Angular 2
问题描述
目前正在学习 Angular 2.0 ，我遇到了文件 Zone.js ，我想知道它的目的是什么文件Zone.js以及它将如何使我的应用程序变得更好.
Currently am learning Angular 2.0 and i come accross the file Zone.js, and i would like to know what is the purpose of the file Zone.js and how will it make my application better.
推荐答案
区域是一个在异步任务之间持久存在的执行上下文，并允许区域的创建者观察和控制区域内代码的执行.
A zone is an execution context that persists across async tasks, and allows the creator of the zone to observe and control execution of the code within the zone.
我认为在angular2中使用zonejs的主要目的是知道何时渲染.
根据 NgZone入门(第5章:用例/用例3:框架自动渲染)
According to NgZone Primer (Chapter 5: Use Cases/Use Case 3: Framework Auto Render)
诸如Angular之类的框架需要知道何时所有应用程序 工作已经完成并在主机环境之前执行DOM更新 执行像素渲染.实际上，这意味着 框架感兴趣的时候主要任务和相关的微 任务已执行，但在VM将控制权移交给 主机.
Frameworks, such as Angular, need to know when all of the application work has completed and perform DOM update before the host environment performs the pixel rendering. In practice this means that the framework is interested when the main task and the associated micro tasks have executed but before the VM hands over the control to the host.
Angular使用该区域修补异步API(addEventListener，setTimeout()等)，并在每次发生异步事件时使用来自这些修补API的通知来运行更改检测.
Angular uses the zone to patch async APIs(addEventListener, setTimeout(), ...) and uses notifications from these patched APIs to run change detection every time some async event happened.
此Angular区域具有onMicrotaskEmpty事件
For this Angular zone has onMicrotaskEmpty event
https ://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/zone/ng_zone.ts#L199
和ApplicationRef订阅此事件以触发更改检测(Application.tick)
and ApplicationRef subscribes to this event to trigger change detection (Application.tick)
zonejs还可用于调试，测试和分析.如果遇到错误，它可以帮助您查看整个调用堆栈.
Also zonejs is useful for debugging, testing, profiling. It helps you see whole call stack if you face with some error.
区域修补异步API，例如:
Zone patches async APIs like:
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中的工作方式很有用
This articles might be usefull to understand how it works in angular2
- http://blog.thoughtram. io/angular/2016/02/01/zones-in-angular-2.html
- http://blog.kwintenp.com/how -hell-do-zones-really-work/
- http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
- http://blog.kwintenp.com/how-the-hell-do-zones-really-work/
这篇关于Angular 2中Zone.js的用途是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
