2016-12-01 1 views

답변

14

영역은 비동기 작업에서 지속되는 실행 컨텍스트로, 영역 작성자가 영역 내의 코드 실행을 관찰하고 제어 할 수 있도록합니다.

나는을 렌더링 할 때 angular2에 zonejs를 사용이 입니다 주요 목적이 알고 있다고 생각합니다. 응용 프로그램의 모든 작업이 완료되면 알고 DOM 업데이트를 수행 할 필요가, 같은 각도로

프레임 워크를 (:/사용 사례 3은 사용 사례 프레임 워크 자동 렌더링 5 장) NgZone Primer에 따르면

호스트 환경 이 픽셀 렌더링을 수행하기 전에. 실제로 이는 프레임 워크가 주 작업과 관련된 마이크로 작업이 실행되었지만 VM이 호스트로 제어 권한을 넘겨주기 전에 관심이 있음을 의미합니다.

는 각도는 비동기 API를 패치 할 영역을 사용 (또는 addEventListener,에서는 setTimeout()를, ...) 및 변경 감지 일부 비동기 이벤트가 발생 할 때마다 실행하려면 다음 패치 API를 알림을 사용합니다. 이 각도 영역

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

은 또한 zonejs (Application.tick)

디버깅을 테스트하는데 유용하다 변화 검출을 트리거하는 이벤트에 onMicrotaskEmpty 이벤트

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

ApplicationRef 구독을 갖는다 , 프로파일 링. 그것은 당신이 어떤 오류와 직면하면 전체 호출 스택을 볼 수 있습니다.

지역이 같은 비동기 API를 패치 : 그것은 angular2

4

Zonejs 어떻게 작동하는지 이해하는 데 유용 할 수

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 

이 기사 중 하나입니다 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/[email protected]?main=browser"></script>

참고 : Plz은 콘솔 오류를 무시합니다. 이 코드는 jsfiddle에서 잘 작동합니다 - https://jsfiddle.net/subhadipghosh/0uqc9rdr/

여기서 우리는 현재 영역의 포크를 생성하고 영역에서 메소드를 호출합니다. 이 메서드에는 비동기 호출 (setTimeout)이 있습니다. 그러나 Zone 아래에 있으므로 Zone 변수에 액세스 할 수 있습니다. 마지막 줄에서는 동일한 변수에 액세스하려고하는 영역 밖을 볼 수 있지만 그 영역에는 정의되지 않은 영역이 있습니다.

원래의 게시물 - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html

각도이 변화 감지 Zonejs을 활용한다. 어떤 변화가 발생할 때마다,이 각도 2의 코드에 따라 감지 -

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

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

각도 영역

앱에서 변경 감지를 시작 onTrunDone 이벤트를 방출한다.

1

Zone.js는 asyn 호출에 사용되며 내부적으로 오류 및 스택 추적을 위해 사용됩니다. angular2가이를 사용하고 있습니다. 그래서 당신은이 자바 스크립트를 무시할 수 없습니다.

관련 문제