在顯示資料之前使用 NgZone 執行多個 HTTP 請求

runOutsideAngular 可用於在 Angular 2 之外執行程式碼，以便它不會不必要地觸發更改檢測。這可以用於例如執行多個 HTTP 請求以在呈現之前獲取所有資料。要在 Angular 2 中再次執行程式碼，可以使用 NgZone 的 run 方法。

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