cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(zone.js): update comment and chapter format of ngzone doc. (#35738)

Browse Source 
PR Close #35738
This commit is contained in:
JiaLiPassion 2020-02-28 12:11:26 +09:00 committed by Matias Niemelä
parent d912d4f34c
commit c06f9a1ce3
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
aio/content/guide/zone.md
View File

@ -218,7 +218,7 @@ zone.run(() => {
This new context, `zoneThis`, can be retrieved from the `setTimeout()` callback function, and this context is the same when the `setTimeout()` is scheduled. This new context, `zoneThis`, can be retrieved from the `setTimeout()` callback function, and this context is the same when the `setTimeout()` is scheduled.
To get the context, you can call [`Zone.current`](https://github.com/angular/angular/blob/master/packages/zone.js/lib/zone.ts). To get the context, you can call [`Zone.current`](https://github.com/angular/angular/blob/master/packages/zone.js/lib/zone.ts).
### Zones and async lifecycle hooks ## Zones and async lifecycle hooks
Zone.js can create contexts that persist across asynchronous operations as well as provide lifecycle hooks for asynchronous operations. Zone.js can create contexts that persist across asynchronous operations as well as provide lifecycle hooks for asynchronous operations.
@ -315,12 +315,12 @@ This function, and all asynchronous operations in that function, trigger change
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
constructor(private ngZone: NgZone) {} constructor(private ngZone: NgZone) {}
ngOnInit() { ngOnInit() {
// new async API is not handled by Zone, so you need to // New async API is not handled by Zone, so you need to
// use ngZone.run to make the asynchronous operation in angular zone // use ngZone.run() to make the asynchronous operation in the angular zone
// and trigger change detection automatically // and trigger change detection automatically.
this.ngZone.run(() => { this.ngZone.run(() => {
someNewAsyncAPI(() => { someNewAsyncAPI(() => {
// update data of component // update the data of the component
}); });
}); });
} }
@ -335,19 +335,20 @@ In that situation, you can use another NgZone method: [runOutsideAngular()](api/
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
constructor(private ngZone: NgZone) {} constructor(private ngZone: NgZone) {}
ngOnInit() { ngOnInit() {
// you know no data will be updated // You know no data will be updated,
// you don't want to do change detection in this // so you don't want to trigger change detection in this
// specified operation, you can call runOutsideAngular // specified operation. Instead, call ngZone.runOutsideAngular()
this.ngZone.runOutsideAngular(() => { this.ngZone.runOutsideAngular(() => {
setTimeout(() => { setTimeout(() => {
// do something will not update component data // update component data
// but don't trigger change detection.
}); });
}); });
} }
} }
``` ```
### Seting up Zone.js ### Setting up Zone.js
To make Zone.js available in Angular, you need to import the zone.js package. To make Zone.js available in Angular, you need to import the zone.js package.
If you are using the Angular CLI, this step is done automatically, and you will see the following line in the `src/polyfills.ts`: If you are using the Angular CLI, this step is done automatically, and you will see the following line in the `src/polyfills.ts`: