Angular 2
Zone.js

Faire référence à NgZone

NgZone référence NgZone peut être injectée via l'injection de dépendance (DI).

my.component.ts

import { Component, NgOnInit, NgZone } from '@angular/core';
  
@Component({...})
export class Mycomponent implements NgOnInit {
  constructor(private _ngZone: NgZone) { }
  ngOnInit() {
    this._ngZone.runOutsideAngular(() => {
      // Do something outside Angular so it won't get noticed
    });
  }
}

Utiliser NgZone pour effectuer plusieurs requêtes HTTP avant d'afficher les données

runOutsideAngular peut être utilisé pour exécuter du code en dehors de Angular 2 afin qu'il ne déclenche pas inutilement la détection de modifications. Cela peut être utilisé par exemple pour exécuter plusieurs requêtes HTTP pour obtenir toutes les données avant de les rendre. Pour exécuter le code à nouveau à l' intérieur angulaire 2, run la méthode de NgZone peut être utilisé.

my.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { Http } from '@angular/http';
  
@Component({...})
export class Mycomponent implements OnInit {
  private data: any[];
  constructor(private http: Http, private _ngZone: NgZone) { }
  ngOnInit() {
    this._ngZone.runOutsideAngular(() => {
      this.http.get('resource1').subscribe((data1:any) => {
        // First response came back, so its data can be used in consecutive request
        this.http.get(`resource2?id=${data1['id']}`).subscribe((data2:any) => {
          this.http.get(`resource3?id1=${data1['id']}&id2=${data2}`).subscribe((data3:any) => {
            this._ngZone.run(() => {
              this.data = [data1, data2, data3];
            });
          });
        });
      });
    });
  }
}