typescript Ionic 2 - 加载控制器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39082539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2 - Loading Controller doesn't work
提问by Thomas Dussaut
I am trying to use the recently added LoadingController this way :
我正在尝试以这种方式使用最近添加的 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();
Basically, I just want to display my loading pop-in before my page is loaded, and dismiss it after.
基本上，我只想在我的页面加载之前显示我的加载弹出窗口，然后关闭它。
I followed the example on Ionic 2 Documentation, but it doesn't seem to work at all...
我遵循了Ionic 2 Documentation上的例子，但它似乎根本不起作用......
EDIT :The loading component doesn't even show up.
编辑：加载组件甚至没有出现。
回答by sebaferreras
The issue with your code is that you're making the http request and then calling the dismiss()but the dismiss()method does not wait for the http request to finish. Please take a look at this plunker.
您的代码的问题在于您正在发出 http 请求，然后调用 ，dismiss()但该dismiss()方法不会等待 http 请求完成。请看看这个 plunker。
The code is pretty much self-explanatory:
该代码几乎不言自明：
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)
);
}
}
回答by Vincent H
I put "loading.dismiss();" in subscribe {} and it works well :)
我把“loading.dismiss();” 在 subscribe {} 中，它运行良好 :)
this.http.get(url)
.subscribe(data =>{
this.items=JSON.parse(data['_body']).results;
loading.dismiss();
},
回答by Donsplash
You can use the ionic ionViewLoaded() to pop up the Loading Controller and then Dismiss it when the View is loaded and the Content Fetched from your Subscribtion.
您可以使用离子 ionViewLoaded() 弹出加载控制器，然后在加载视图和从订阅中获取内容时关闭它。
ionViewLoaded() {
let lr = this.loading.create({
content: 'Your Display Message...',
});
lr.present().then(() => {
this.Yourservice.Yourfunction()
.subscribe(res => {
this.yourresult = res;
});
lr.dismiss();
});
}
You can also structure your code like this to make sure the Subscription is Complete before you Dismiss the 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()
);
});
}
回答by Vanojx1
For the last versione of ionic you ve to handle the dismiss event:
对于 ionic 的最后一个版本，您必须处理解除事件：
let loading = this.load.create({
content: "Connexion au serveur Migal en cours..."
});
loading.present();
loading.onDidDismiss().then(() => {
do thinks.....
});
