离子 2:加载屏幕不会关闭

Question

我有一个用 Ionic 2 制作的应用程序，工作流程是这样的

案例 A .用户首次使用应用时

• 用户登录(显示加载(
• 成功登录后，加载窗口将被隐藏，用户被转发到仪表板页面。
• 在仪表板页面中，项目通过 ajax 请求加载。

案例 B.当用户之前已登录时

• 第一个屏幕是仪表板，项目通过 ajax 请求加载。

问题

在情况 A 中，当用户登录并转发到 DashboardPage 时，加载屏幕不会关闭。有时它会被解雇，但大多数时候它不会？这是离子虫还是我做错了什么？

这是我的DashboardPage

//imports here

export class DashboardPage {
public loadingmsg: any;
public ajaxRequest: any;
constructor(
public navCtrl: NavController, 
public navParams: NavParams, 
private webservice: WebService, 
private loadingCtrl: LoadingController
)
{
this.loadDashboardContents();
}
loadDashboardContents(){
//other codes
this.loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
this.loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
this.loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}
}

更新登录页面的登录方法

loginUser(){
this.loading=this.loadingctrl.create({
content:"Logging in, please wait..."
});
this.loading.present();
this.ajaxRequest = this.webservice.loginUser(params).subscribe(data => {
this.loading.dismiss();
if(data.status =="ok"){
this.navctrl.push(DashboardPage).then(()=>{
const index = this.viewCtrl.index;
this.navctrl.remove(index);
});
}else{
//show error alert
}
}, err =>{
this.loading.dismiss();
});
}

我的离子和科尔多瓦版本信息

Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.9
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3
OS Platform: Windows 10
Cordova Version: 6.5.0

Answer 1

我目前正在我的项目中使用加载，并且在所有情况下都运行良好。为了确保加载将始终关闭，您需要添加一些代码：

1.持续时间，关闭页面更改

let loading = this.loadingCtrl.create({
content: "",
duration: 5000, //ms
dismissOnPageChange: true 
})

2. 当 AJAX 调用成功或错误时不满意：

.subscribe(success=>{
//some code
loading.dismiss();
},error=>{
//some code
loading.dismiss();
})

Answer 2

这可能是由于订阅方法中的this引用。我会尝试在本地声明loadingmsg并删除this.

loadDashboardContents(){
//other codes
let loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}