NgZone
An injectable service for executing work inside or outside of the Angular zone.
class NgZone {
static isInAngularZone(): boolean
static assertInAngularZone(): void
static assertNotInAngularZone(): void
constructor(__0)
hasPendingMacrotasks: boolean
hasPendingMicrotasks: boolean
isStable: boolean
onUnstable: EventEmitter<any>
onMicrotaskEmpty: EventEmitter<any>
onStable: EventEmitter<any>
onError: EventEmitter<any>
run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T
runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T
runOutsideAngular<T>(fn: (...args: any[]) => T): T
}
说明
The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via runOutsideAngular and if needed, these tasks can reenter the Angular zone via run.
静态方法
构造函数
属性
| 属性 | 说明 |
|---|---|
hasPendingMacrotasks: boolean | 只读 |
hasPendingMicrotasks: boolean | 只读 |
isStable: boolean | 只读 Whether there are no outstanding microtasks or macrotasks. |
onUnstable: EventEmitter<any> | 只读 Notifies when code enters Angular Zone. This gets fired first on VM Turn. |
onMicrotaskEmpty: EventEmitter<any> | 只读 Notifies when there is no more microtasks enqueued in the current VM Turn. This is a hint for Angular to do change detection, which may enqueue more microtasks. For this reason this event can fire multiple times per VM Turn. |
onStable: EventEmitter<any> | 只读 Notifies when the last |
onError: EventEmitter<any> | 只读 Notifies that an error has been delivered. |
方法
Executes the |
Running functions via Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone. If a synchronous error happens it will be rethrown and not reported via |
Executes the |
Running functions via Any future tasks or microtasks scheduled from within this function will continue executing from within the Angular zone. If a synchronous error happens it will be rethrown and not reported via |
Same as |
Executes the |
Running functions via runOutsideAngular allows you to escape Angular's zone and do work that doesn't trigger Angular change-detection or is subject to Angular's error handling. Any future tasks or microtasks scheduled from within this function will continue executing from outside of the Angular zone. Use run to reenter the Angular zone and do work that updates the application model. |
使用说明
Example
import {Component, NgZone} from '@angular/core';
import {NgIf} from '@angular/common';
@Component({
selector: 'ng-zone-demo',
template: `
<h2>Demo: NgZone</h2>
<p>Progress: {{progress}}%</p>
<p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
<button (click)="processWithinAngularZone()">Process within Angular zone</button>
<button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
`,
})
export class NgZoneDemo {
progress: number = 0;
label: string;
constructor(private _ngZone: NgZone) {}
// Loop inside the Angular zone
// so the UI DOES refresh after each setTimeout cycle
processWithinAngularZone() {
this.label = 'inside';
this.progress = 0;
this._increaseProgress(() => console.log('Inside Done!'));
}
// Loop outside of the Angular zone
// so the UI DOES NOT refresh after each setTimeout cycle
processOutsideOfAngularZone() {
this.label = 'outside';
this.progress = 0;
this._ngZone.runOutsideAngular(() => {
this._increaseProgress(() => {
// reenter the Angular zone and display done
this._ngZone.run(() => { console.log('Outside Done!'); });
});
});
}
_increaseProgress(doneCallback: () => void) {
this.progress += 1;
console.log(`Current progress: ${this.progress}%`);
if (this.progress < 100) {
window.setTimeout(() => this._increaseProgress(doneCallback), 10);
} else {
doneCallback();
}
}
}
