Buscar..


Obtener referencia a NgZone

NgZone referencia de NgZone se puede inyectar a través de la inyección de dependencia (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
    });
  }
}

Uso de NgZone para realizar múltiples solicitudes HTTP antes de mostrar los datos

runOutsideAngular se puede usar para ejecutar código fuera de Angular 2 para que no active la detección de cambios innecesariamente. Esto se puede usar para, por ejemplo, ejecutar varias solicitudes HTTP para obtener todos los datos antes de representarlos. Para ejecutar código de nuevo en el interior angular 2, run el método de NgZone se puede utilizar.

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow