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和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

Answer 1

我目前正在我的项目中使用加载，并且它在所有情况下都运行良好。为了确保加载总是不需要你需要添加一些代码：

1.持续时间，dismissOnPageChange

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.
        });
    });
}

离子2：加载屏幕不会被解雇

2 个答案: