Angular 2
Zone.js

NgZone에 대한 참조 얻기

NgZone 참조는 DI (Dependency Injection)를 통해 주입 할 수 있습니다.

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을 사용하여 데이터를 표시하기 전에 여러 HTTP 요청 수행

runOutsideAngular 를 사용하면 변경 감지가 불필요하게 트리거되지 않도록 각도 2 외부에서 코드를 실행할 수 있습니다. 예를 들어, 렌더링하기 전에 모든 데이터를 얻기 위해 여러 HTTP 요청을 실행하는 데 사용할 수 있습니다. Angular 2에서 코드를 다시 실행하려면 NgZone run 메소드를 NgZone 수 있습니다.

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