知道何時從 Angular2 中的提供者完成 http 請求

Question

我創建了一個這樣的提供者：

import {Injectable, Provider, Inject} from 'angular2/core';
import {Http, Response, Headers} from 'angular2/http';
import {Platform, Storage, SqlStorage,LocalStorage} from "ionic-angular";


@Injectable()
export class MyProvider {


    constructor(@Inject(Platform)platform,@Inject(Http)http) {    
        this.http = http;
    }


    GetSomeOtherStuff() {

            var headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');

            this.http.post(
                        'http://localhost:3000/getotherstuff',
                        {headers: headers}
                    ).map(
                        (res:Response)=>res.json())
                        .subscribe(
                            (response) => {

                               //my response now can be used

                            },
                            (err) => {

                            },
                            () => {

                            }
                        ); //end of subscribe

    }


     GetSomeStuff() {

            var headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');

            this.http.post(
                        'http://localhost:3000/getstuff',
                        {headers: headers}
                    ).map(
                        (res:Response)=>res.json())
                        .subscribe(
                            (response) => {

                               //my response now can be used

                            },
                            (err) => {

                            },
                            () => {

                            }
                        ); //end of subscribe

    }

然后我有一個頁面。 在這個頁面內，我希望當用戶訪問它時調用提供者 getstuff() 和 getotherstuff() 函數來獲取一些數據。 當數據加載時，應該顯示一個小微調器，但是當請求完成時，頁面應該知道這一點。

@Page({
    templateUrl: 'build/pages/mypage/mypage.html',
    providers: [MyProvider]
})

export class MyPage {

   isLoadingSpinner = False;

    constructor(_providerMessages: ProviderMessages) {

       //when this page is come upon I would like to get the data from getstuff and getothersstuff.
       // when it loads it should go into these two varaibles to be displayed on the page.

       isLoadingSpinner = True; //page is laoding so show spinner

       this.first_data = //getstuff from provider when loaded
       this.second_data = //getotherstuff from provider when loaded

       isLoadingSpinner = false; //page is done loading


        }

    }

}

本質上，我希望頁面在加載時顯示數據，但是當我們仍在等待響應時，我也應該能夠捕獲該狀態，以便我可以顯示微調器

Answer 1

提供者

@Injectable()
export class MyProvider {

  constructor(@Inject(Platform)platform, @Inject(Http) http) {
    this.http = http;
  }

  GetSomeOtherStuff() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post(
      'http://localhost:3000/getotherstuff',
      {headers: headers}
    ).map((res: Response)=>res.json());

  }

  GetSomeStuff() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post(
      'http://localhost:3000/getstuff',
      {headers: headers}).map((res: Response)=>res.json());

  }
}

成分

@Page({
  templateUrl: 'build/pages/mypage/mypage.html',
  providers: [MyProvider]
})

export class MyPage {

  completedRequests = 0;
  isLoadingSpinner = true;

  constructor(_providerMessages: ProviderMessages, private dataService: MyProvider) {

    //when this page is come upon I would like to get the data from getstuff and getothersstuff.
    // when it loads it should go into these two varaibles to be displayed on the page.

    this.dataService.GetSomeStuff().subscribe(
      (data)=> {
        this.first_data = //getstuff from provider when loaded},
          this.completedRequests++;
      },
      (err) => {
      },
      () => {
        if(this.completedRequests == 2) {
          isLoadingSpinner = false;
        } //page is done loading
      }); //end

    this.dataService.GetSomeOtherStuff().subscribe(
      (data)=> {
        this.second_data = //getotherstuff from provider when loaded
          this.completedRequests++;
      },
      (err) => {
      },
      () => {
        if(this.completedRequests == 2) {
          isLoadingSpinner = false;
        } //page is done loading
      }
    )

  }
}

模板(mypage.html)

<div class="container-of-everything" *ngIf="!isLoadingSpinner">
  <!-- all stuff goes here -->
</div>

<div class="spinner spinning" *ngIf="isLoadingSpinner">
</div>

Answer 2

您可以簡單地將組件 this 傳遞給GetSomeOtherStuff(parentRef: any)和GetSomeStuff(parentRef : any) ，然后在您的（響應）中調用 get 父組件引用的布爾值，然后在()={ spinner=false; }完成時設置為 true ()={ spinner=false; } ()={ spinner=false; }