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)，然后在你调用的内部（响应）中获取父组件的灵活性，其中boolean是，然后在完成时设置为true在()={ spinner=false; }

知道何时从Angular2中的提供程序完成http请求

2 个答案: