Angular 2
Zone.js

Verwijzing naar NgZone

NgZone referentie kan worden geïnjecteerd via de Dependency Injection (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
    });
  }
}

NgZone gebruiken om meerdere HTTP-aanvragen te doen voordat de gegevens worden weergegeven

runOutsideAngular kan worden gebruikt om code buiten Angular 2 uit te voeren, zodat deze geen onnodige detectie van veranderingen teweegbrengt. Dit kan bijvoorbeeld worden gebruikt om meerdere HTTP-aanvragen uit te voeren om alle gegevens op te halen voordat deze worden weergegeven. Om code opnieuw uit te voeren binnen Angular 2, kan de run methode van NgZone worden gebruikt.

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];
            });
          });
        });
      });
    });
  }
}