知道当HTTP请求从提供商Angular2

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

你可以简单地传递这样的组件GetSomeOtherStuff(parentRef: any)和GetSomeStuff(parentRef : any)，然后你的（响应）内调用得到父母的组件refrenece其中boolean is then then then set in true in ()={ spinner=false; }