Ionic 2 - 加载控制器不起作用

Question

我正在尝试以这种方式使用最近添加的 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 上的示例进行操作，但它似乎根本不起作用...

编辑： 加载组件甚至没有出现。

Answer 1

对于最后一个版本的 ionic 你已经处理了 dismiss 事件：

let loading = this.load.create({
    content: "Connexion au serveur Migal en cours..."
});

loading.present();

loading.onDidDismiss().then(() => {
     do thinks..... 
});

Answer 2

您的代码存在的问题是您发出了 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)
    );

  }
}

Answer 3

我将 "loading.dismiss();" 放入订阅 {} 中，效果很好:)

                    this.http.get(url)
                        .subscribe(data =>{
                            this.items=JSON.parse(data['_body']).results;
                            loading.dismiss();
                        },

Answer 4

您可以使用离子 ionViewLoaded() 弹出加载控制器，然后在加载视图并从您的订阅中获取内容时关闭它。

ionViewLoaded() {
  let lr = this.loading.create({
    content: 'Your Display Message...',
  });

  lr.present().then(() => {
    this.Yourservice.Yourfunction()
      .subscribe(res => {
        this.yourresult = res;
      });
    lr.dismiss();
  });
}

您也可以像这样构造您的代码，以确保在关闭加载器之前订阅已完成。

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()
          );

      });
    }

Ionic 2 - 加载控制器不起作用

Ionic 2 - Loading Controller doesn't work

typescript

ionic-framework

ionic2

ionic3

angular