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

Posted 2023-03-13

【中文标题】Ionic 2 - 加载控制器不起作用

【英文标题】：Ionic 2 - Loading Controller doesn't work

【发布时间】：2016-12-29 04:22:37

【问题描述】：

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

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

【参考方案1】：

对于 ionic 的最后一个版本，您必须处理解除事件：

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

loading.present();

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

【讨论】：

好吧，多亏了你，加载组件出现了，但一直在运行：D

loading.present(); /* some stuff */ loading.onDidDismiss(()=>loading.dismiss(););

我试过了，但正如我所说，旋转永远在转动

别等了，你必须在 onDidDismiss 事件中进行 http 调用

【参考方案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)
    );

  

【讨论】：

它就像一个魅力！ :) 感谢您的解释。我忘记了不对称的东西。

加载后Popup.dismiss();你不能再使用它了。假设我们有一个按钮，并且您想在用户单击它时显示 loadingpopup，那么您需要重新创建 loadingpopup。

【参考方案3】：

我把“loading.dismiss();”在订阅 中，它运行良好:)

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

【参考方案4】：

您可以使用 ionic 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()
          );

      );