Angular 2
Zone.js

Uzyskiwanie odniesienia do NgZone

Odniesienie do NgZone można wstrzyknąć za pomocą wstrzykiwania zależności (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
    });
  }
}

Korzystanie z NgZone do wykonywania wielu żądań HTTP przed wyświetleniem danych

runOutsideAngular może być używany do uruchamiania kodu poza Angular 2, aby niepotrzebnie nie uruchamiał wykrywania zmian. Można tego użyć na przykład do uruchomienia wielu żądań HTTP, aby uzyskać wszystkie dane przed ich renderowaniem. Aby ponownie uruchomić kod wewnątrz kątowej 2, run metodą NgZone mogą być użyte.

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