[英]Know when http requests are finished from provider in Angular2
I created a provider like this:我创建了一个这样的提供者:
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
}
I then have a page.然后我有一个页面。 Inside of this page I would like when a user comes to it to call the provider getstuff() and getotherstuff() functions to get some data.
在这个页面内,我希望当用户访问它时调用提供者 getstuff() 和 getotherstuff() 函数来获取一些数据。 While the data is loading a little spinner should show, but when the requests finish the page should know about this.
当数据加载时,应该显示一个小微调器,但是当请求完成时,页面应该知道这一点。
@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
}
}
}
Essentially I would like the page to display the data when it is loaded, but when we are still waiting for the response I should be able to capture that state too so I could show the spinner本质上,我希望页面在加载时显示数据,但是当我们仍在等待响应时,我也应该能够捕获该状态,以便我可以显示微调器
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());
}
}
Component成分
@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
}
)
}
}
Template (mypage.html)模板(mypage.html)
<div class="container-of-everything" *ngIf="!isLoadingSpinner">
<!-- all stuff goes here -->
</div>
<div class="spinner spinning" *ngIf="isLoadingSpinner">
</div>
You could simply pass the components this to GetSomeOtherStuff(parentRef: any)
and GetSomeStuff(parentRef : any)
and then inside your (response) you call get the parent's component refrenece where the boolean is and then set true on completion in ()={ spinner=false; }
您可以简单地将组件 this 传递给
GetSomeOtherStuff(parentRef: any)
和GetSomeStuff(parentRef : any)
,然后在您的(响应)中调用 get 父组件引用的布尔值,然后在()={ spinner=false; }
完成时设置为 true ()={ spinner=false; }
()={ spinner=false; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.