1
|
import { EventEmitter } from '../event_emitter';
|
2
|
/**
|
3
|
* An injectable service for executing work inside or outside of the Angular zone.
|
4
|
*
|
5
|
* The most common use of this service is to optimize performance when starting a work consisting of
|
6
|
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
|
7
|
* Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
|
8
|
* can reenter the Angular zone via {@link #run}.
|
9
|
*
|
10
|
* <!-- TODO: add/fix links to:
|
11
|
* - docs explaining zones and the use of zones in Angular and change-detection
|
12
|
* - link to runOutsideAngular/run (throughout this file!)
|
13
|
* -->
|
14
|
*
|
15
|
* ### Example
|
16
|
*
|
17
|
* ```
|
18
|
* import {Component, NgZone} from '@angular/core';
|
19
|
* import {NgIf} from '@angular/common';
|
20
|
*
|
21
|
* @Component({
|
22
|
* selector: 'ng-zone-demo'.
|
23
|
* template: `
|
24
|
* <h2>Demo: NgZone</h2>
|
25
|
*
|
26
|
* <p>Progress: {{progress}}%</p>
|
27
|
* <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
|
28
|
*
|
29
|
* <button (click)="processWithinAngularZone()">Process within Angular zone</button>
|
30
|
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
|
31
|
* `,
|
32
|
* })
|
33
|
* export class NgZoneDemo {
|
34
|
* progress: number = 0;
|
35
|
* label: string;
|
36
|
*
|
37
|
* constructor(private _ngZone: NgZone) {}
|
38
|
*
|
39
|
* // Loop inside the Angular zone
|
40
|
* // so the UI DOES refresh after each setTimeout cycle
|
41
|
* processWithinAngularZone() {
|
42
|
* this.label = 'inside';
|
43
|
* this.progress = 0;
|
44
|
* this._increaseProgress(() => console.log('Inside Done!'));
|
45
|
* }
|
46
|
*
|
47
|
* // Loop outside of the Angular zone
|
48
|
* // so the UI DOES NOT refresh after each setTimeout cycle
|
49
|
* processOutsideOfAngularZone() {
|
50
|
* this.label = 'outside';
|
51
|
* this.progress = 0;
|
52
|
* this._ngZone.runOutsideAngular(() => {
|
53
|
* this._increaseProgress(() => {
|
54
|
* // reenter the Angular zone and display done
|
55
|
* this._ngZone.run(() => {console.log('Outside Done!') });
|
56
|
* }}));
|
57
|
* }
|
58
|
*
|
59
|
* _increaseProgress(doneCallback: () => void) {
|
60
|
* this.progress += 1;
|
61
|
* console.log(`Current progress: ${this.progress}%`);
|
62
|
*
|
63
|
* if (this.progress < 100) {
|
64
|
* window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
|
65
|
* } else {
|
66
|
* doneCallback();
|
67
|
* }
|
68
|
* }
|
69
|
* }
|
70
|
* ```
|
71
|
*
|
72
|
* @experimental
|
73
|
*/
|
74
|
export declare class NgZone {
|
75
|
readonly hasPendingMicrotasks: boolean;
|
76
|
readonly hasPendingMacrotasks: boolean;
|
77
|
/**
|
78
|
* Whether there are no outstanding microtasks or macrotasks.
|
79
|
*/
|
80
|
readonly isStable: boolean;
|
81
|
/**
|
82
|
* Notifies when code enters Angular Zone. This gets fired first on VM Turn.
|
83
|
*/
|
84
|
readonly onUnstable: EventEmitter<any>;
|
85
|
/**
|
86
|
* Notifies when there is no more microtasks enqueue in the current VM Turn.
|
87
|
* This is a hint for Angular to do change detection, which may enqueue more microtasks.
|
88
|
* For this reason this event can fire multiple times per VM Turn.
|
89
|
*/
|
90
|
readonly onMicrotaskEmpty: EventEmitter<any>;
|
91
|
/**
|
92
|
* Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
|
93
|
* implies we are about to relinquish VM turn.
|
94
|
* This event gets called just once.
|
95
|
*/
|
96
|
readonly onStable: EventEmitter<any>;
|
97
|
/**
|
98
|
* Notifies that an error has been delivered.
|
99
|
*/
|
100
|
readonly onError: EventEmitter<any>;
|
101
|
constructor({enableLongStackTrace}: {
|
102
|
enableLongStackTrace?: boolean;
|
103
|
});
|
104
|
static isInAngularZone(): boolean;
|
105
|
static assertInAngularZone(): void;
|
106
|
static assertNotInAngularZone(): void;
|
107
|
/**
|
108
|
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
|
109
|
* the function.
|
110
|
*
|
111
|
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
|
112
|
* outside of the Angular zone (typically started via {@link #runOutsideAngular}).
|
113
|
*
|
114
|
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
115
|
* within the Angular zone.
|
116
|
*
|
117
|
* If a synchronous error happens it will be rethrown and not reported via `onError`.
|
118
|
*/
|
119
|
run(fn: () => any): any;
|
120
|
/**
|
121
|
* Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
|
122
|
* rethrown.
|
123
|
*/
|
124
|
runGuarded(fn: () => any): any;
|
125
|
/**
|
126
|
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
|
127
|
* the function.
|
128
|
*
|
129
|
* Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do
|
130
|
* work that
|
131
|
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
|
132
|
*
|
133
|
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
134
|
* outside of the Angular zone.
|
135
|
*
|
136
|
* Use {@link #run} to reenter the Angular zone and do work that updates the application model.
|
137
|
*/
|
138
|
runOutsideAngular(fn: () => any): any;
|
139
|
}
|