1
|
/**
|
2
|
* @license
|
3
|
* Copyright Google Inc. All Rights Reserved.
|
4
|
*
|
5
|
* Use of this source code is governed by an MIT-style license that can be
|
6
|
* found in the LICENSE file at https://angular.io/license
|
7
|
*/
|
8
|
/**
|
9
|
* @stable
|
10
|
*/
|
11
|
export declare abstract class ChangeDetectorRef {
|
12
|
/**
|
13
|
* Marks all {@link ChangeDetectionStrategy#OnPush} ancestors as to be checked.
|
14
|
*
|
15
|
* <!-- TODO: Add a link to a chapter on OnPush components -->
|
16
|
*
|
17
|
* ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
|
18
|
*
|
19
|
* ```typescript
|
20
|
* @Component({
|
21
|
* selector: 'cmp',
|
22
|
* changeDetection: ChangeDetectionStrategy.OnPush,
|
23
|
* template: `Number of ticks: {{numberOfTicks}}`
|
24
|
* })
|
25
|
* class Cmp {
|
26
|
* numberOfTicks = 0;
|
27
|
*
|
28
|
* constructor(private ref: ChangeDetectorRef) {
|
29
|
* setInterval(() => {
|
30
|
* this.numberOfTicks++;
|
31
|
* // the following is required, otherwise the view will not be updated
|
32
|
* this.ref.markForCheck();
|
33
|
* }, 1000);
|
34
|
* }
|
35
|
* }
|
36
|
*
|
37
|
* @Component({
|
38
|
* selector: 'app',
|
39
|
* changeDetection: ChangeDetectionStrategy.OnPush,
|
40
|
* template: `
|
41
|
* <cmp><cmp>
|
42
|
* `,
|
43
|
* })
|
44
|
* class App {
|
45
|
* }
|
46
|
* ```
|
47
|
*/
|
48
|
abstract markForCheck(): void;
|
49
|
/**
|
50
|
* Detaches the change detector from the change detector tree.
|
51
|
*
|
52
|
* The detached change detector will not be checked until it is reattached.
|
53
|
*
|
54
|
* This can also be used in combination with {@link ChangeDetectorRef#detectChanges} to implement
|
55
|
* local change
|
56
|
* detection checks.
|
57
|
*
|
58
|
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
|
59
|
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
|
60
|
*
|
61
|
* ### Example
|
62
|
*
|
63
|
* The following example defines a component with a large list of readonly data.
|
64
|
* Imagine the data changes constantly, many times per second. For performance reasons,
|
65
|
* we want to check and update the list every five seconds. We can do that by detaching
|
66
|
* the component's change detector and doing a local check every five seconds.
|
67
|
*
|
68
|
* ```typescript
|
69
|
* class DataProvider {
|
70
|
* // in a real application the returned data will be different every time
|
71
|
* get data() {
|
72
|
* return [1,2,3,4,5];
|
73
|
* }
|
74
|
* }
|
75
|
*
|
76
|
* @Component({
|
77
|
* selector: 'giant-list',
|
78
|
* template: `
|
79
|
* <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
|
80
|
* `,
|
81
|
* })
|
82
|
* class GiantList {
|
83
|
* constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {
|
84
|
* ref.detach();
|
85
|
* setInterval(() => {
|
86
|
* this.ref.detectChanges();
|
87
|
* }, 5000);
|
88
|
* }
|
89
|
* }
|
90
|
*
|
91
|
* @Component({
|
92
|
* selector: 'app',
|
93
|
* providers: [DataProvider],
|
94
|
* template: `
|
95
|
* <giant-list><giant-list>
|
96
|
* `,
|
97
|
* })
|
98
|
* class App {
|
99
|
* }
|
100
|
* ```
|
101
|
*/
|
102
|
abstract detach(): void;
|
103
|
/**
|
104
|
* Checks the change detector and its children.
|
105
|
*
|
106
|
* This can also be used in combination with {@link ChangeDetectorRef#detach} to implement local
|
107
|
* change detection
|
108
|
* checks.
|
109
|
*
|
110
|
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
|
111
|
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
|
112
|
*
|
113
|
* ### Example
|
114
|
*
|
115
|
* The following example defines a component with a large list of readonly data.
|
116
|
* Imagine, the data changes constantly, many times per second. For performance reasons,
|
117
|
* we want to check and update the list every five seconds.
|
118
|
*
|
119
|
* We can do that by detaching the component's change detector and doing a local change detection
|
120
|
* check
|
121
|
* every five seconds.
|
122
|
*
|
123
|
* See {@link ChangeDetectorRef#detach} for more information.
|
124
|
*/
|
125
|
abstract detectChanges(): void;
|
126
|
/**
|
127
|
* Checks the change detector and its children, and throws if any changes are detected.
|
128
|
*
|
129
|
* This is used in development mode to verify that running change detection doesn't introduce
|
130
|
* other changes.
|
131
|
*/
|
132
|
abstract checkNoChanges(): void;
|
133
|
/**
|
134
|
* Reattach the change detector to the change detector tree.
|
135
|
*
|
136
|
* This also marks OnPush ancestors as to be checked. This reattached change detector will be
|
137
|
* checked during the next change detection run.
|
138
|
*
|
139
|
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
|
140
|
*
|
141
|
* ### Example ([live demo](http://plnkr.co/edit/aUhZha?p=preview))
|
142
|
*
|
143
|
* The following example creates a component displaying `live` data. The component will detach
|
144
|
* its change detector from the main change detector tree when the component's live property
|
145
|
* is set to false.
|
146
|
*
|
147
|
* ```typescript
|
148
|
* class DataProvider {
|
149
|
* data = 1;
|
150
|
*
|
151
|
* constructor() {
|
152
|
* setInterval(() => {
|
153
|
* this.data = this.data * 2;
|
154
|
* }, 500);
|
155
|
* }
|
156
|
* }
|
157
|
*
|
158
|
* @Component({
|
159
|
* selector: 'live-data',
|
160
|
* inputs: ['live'],
|
161
|
* template: 'Data: {{dataProvider.data}}'
|
162
|
* })
|
163
|
* class LiveData {
|
164
|
* constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}
|
165
|
*
|
166
|
* set live(value) {
|
167
|
* if (value) {
|
168
|
* this.ref.reattach();
|
169
|
* } else {
|
170
|
* this.ref.detach();
|
171
|
* }
|
172
|
* }
|
173
|
* }
|
174
|
*
|
175
|
* @Component({
|
176
|
* selector: 'app',
|
177
|
* providers: [DataProvider],
|
178
|
* template: `
|
179
|
* Live Update: <input type="checkbox" [(ngModel)]="live">
|
180
|
* <live-data [live]="live"><live-data>
|
181
|
* `,
|
182
|
* })
|
183
|
* class App {
|
184
|
* live = true;
|
185
|
* }
|
186
|
* ```
|
187
|
*/
|
188
|
abstract reattach(): void;
|
189
|
}
|