Question

博客中的任何地方文章加载器是在组件中创建的。我需要创建一个加载器并在整个应用程序中使用它。但问题是，在离子3中，我们不能手动解除装载机。它应该在它出现如下正确的代码之后被驳回：

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries()
      .subscribe(res => {
        this.latestEntries = res;
      });
    loader.dismiss();
  });
}

我尝试使用服务创建加载器，并在我想要全部应用程序时使用它。如下：

import {Injectable} from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Injectable()
export class BasicService{
    loader: any;    
    constructor(public loadingCtrl: LoadingController){
      //creates loader once so there is less data redundancy
        this.loader = this.loadingCtrl.create({
            content: `loading...`,
        });

    }
    showLoader() { //call this fn to show loader
        this.loader.present();    
    }
    hideLoader() { //call this fn to hide loader
        this.loader.dismiss();
    }
}

但是它不起作用，给出了诸如。

之类的错误

运行时错误未捕获（在承诺中）：找不到removeView

那么有什么方法可以在离子3中实现这一壮举，这可以帮助我实现数据冗余吗？

Answer 1

  constructor(public loadingCtrl: LoadingController){
      //creates loader once so there is less data redundancy
    }
    showLoader() { //call this fn to show loader
        this.loader = this.loadingCtrl.create({
            content: `loading...`,
        });
        this.loader.present();    
    }

从控制器中删除创建LoadingController实例，并将其添加到您服务的showLoader()功能中。

Answer 2

您收到该错误是因为当您的加载程序未显示时调用this.loader.dismiss();。所以，正确的方法是：

showLoader(content?: string) {
    if (this.loader) {
      this.loader.dismiss();
    }
    this.loader = this.loadingCtrl.create({ 
      content: content ? content : "Loading..."
    })
    this.loader.present();
    this.loader.onDidDismiss(()=>{
      this.loader = null;
    })
 }
hideLoader() {
    if(this.loader)
      this.loader.dismiss();
}

如何创建一次加载器并在整个应用程序中使用它？ - 离子3

2 个答案: