wissen, wenn HTTP-Anfragen von Provider in Angular2 fertig sind

Question

ich einen Provider wie folgt erstellt:

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 

    } 

ich dann eine Seite haben. Innerhalb dieser Seite möchte ich, wenn ein Benutzer dazu kommt, den Provider getstuff() anrufen und getotherstuff() Funktionen holen, um Daten zu bekommen. Während die Daten geladen werden, sollte ein kleiner Spinner angezeigt werden, aber wenn die Anfragen enden, sollte die Seite darüber informiert sein.

@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 


     } 

    } 

} 

Im Wesentlichen würde ich die Seite wie die Daten angezeigt werden, wenn es geladen wird, aber wenn wir noch auf die Antwort warten, soll ich in der Lage sein, auch diesen Zustand zu erfassen, so konnte ich die Spinner

Answer 1

zeigen

Provider

@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()); 

    } 
} 

Komponente

@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 
     } 
    ) 

    } 
} 

Vorlage(mypage.html)

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

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

Answer 2

Sie einfach die Komponenten, dies zu GetSomeOtherStuff(parentRef: any) und GetSomeStuff(parentRef : any) und dann in Ihrem (Antwort) passieren könnte rufen Sie die Komponente refrenece der Eltern, wo die Boolescher Wert ist und dann nach Abschluss in ()={ spinner=false; }