我试图以这种方式使用最近添加的LoadingController:
let loading=this.load.create({
content: "Connexion au serveur Migal en cours..."
});
loading.present();
this.http.get(this.urlCheckerForm.value.migalUrl+'/action/MobileApp/URLChecker')
.map(res => res.json())
.subscribe(
data => this.newConnection(data,loading),
error => this.catchURLError(loading));
loading.dismiss();
基本上,我只是想在我的页面加载之前显示我的加载弹出窗口,并在之后将其关闭。
我按照Ionic 2 Documentation上的示例进行操作,但它似乎根本不起作用......
编辑:加载组件甚至都没有显示。
答案 0 :(得分:15)
您的代码的问题在于您正在发出http请求,然后调用dismiss()
,但dismiss()
方法不会等待http请求完成。请查看this plunker。
代码几乎是不言自明的:
import { NavController, LoadingController } from 'ionic-angular/index';
import { Http, Response } from '@angular/http';
import { Component } from "@angular/core";
import 'rxjs/Rx';
@Component({
templateUrl:"home.html"
})
export class HomePage {
private users : Array<any>
constructor(private http: Http, private loadingCtrl: LoadingController) {
// Create the popup
let loadingPopup = this.loadingCtrl.create({
content: 'Loading data...'
});
// Show the popup
loadingPopup.present();
// Get the data
this.http.get('https://jsonplaceholder.typicode.com/users')
.map((res: Response) => res.json())
.subscribe(
data => {
// I've added this timeout just to show the loading popup more time
setTimeout(() => {
this.users= data;
loadingPopup.dismiss();
}, 1000);
// Should be just this:
// this.users= data;
// loadingPopup.dismiss();
},
err => console.error(err)
);
}
}
答案 1 :(得分:1)
我把“loading.dismiss();”在subscribe {}中它运作良好:)
this.http.get(url)
.subscribe(data =>{
this.items=JSON.parse(data['_body']).results;
loading.dismiss();
},
答案 2 :(得分:1)
您可以使用离子ionViewLoaded()弹出加载控制器,然后在加载视图和从订阅中获取内容时将其关闭。
ionViewLoaded() {
let lr = this.loading.create({
content: 'Your Display Message...',
});
lr.present().then(() => {
this.Yourservice.Yourfunction()
.subscribe(res => {
this.yourresult = res;
});
lr.dismiss();
});
}
您也可以像这样构建代码,以确保在解除Loader之前订阅已完成。
ionViewLoaded() {
let lr = this.loading.create({
content: 'Your Display Message...',
});
lr.present().then(() => {
this.Yourservice.Yourfunction()
.subscribe(
data => this.yourresult = data,
error => console.log(error),
()=> lr.dismiss()
);
});
}
答案 3 :(得分:0)
对于离子的最后一个版本,你要处理解雇事件:
let loading = this.load.create({
content: "Connexion au serveur Migal en cours..."
});
loading.present();
loading.onDidDismiss().then(() => {
do thinks.....
});