Ionic 2：加载屏幕不会被关闭答案

【问题标题】：Ionic 2: Loading screen does not get dismissedIonic 2：加载屏幕不会被关闭
【发布时间】：2018-01-17 07:15:41
【问题描述】：

我有一个使用 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 和 cordova 版本信息

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

【问题讨论】：

可能请求中有错误，订阅抛出错误（未在您的代码中处理）？您能否设置一个debugger 来验证是否到达this.loadingmsg.dismiss()... 行？
@sebaferreras，不，请求中没有错误，我可以在控制台中看到来自服务器的正确响应。 this.loadingmsg.dismiss() 我也用它进行了测试，它到达了那里。
仅出于测试目的，如果您没有在 LoginPage 中显示加载（注释显示它的行以及稍后隐藏它的行），而只是在仪表板中显示它会发生什么？这只是为了看看这两个加载实例之间是否存在冲突......
@sebaferreras，也这样做了，没有任何区别，加载有时会被解雇，但并非总是如此。
你能显示你使用loading的登录页面吗？

标签： ionic2

【解决方案1】：

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

1.持续时间，dismissOnPageChange

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

2。 ajax调用成功或错误时dissmis：

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

【讨论】：

【解决方案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.
        });
    });
}

【讨论】：