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

【问题标题】：How to create loader once and use it all over the app? - Ionic 3如何创建一次加载器并在整个应用程序中使用它？ - 离子 3
【发布时间】：2018-01-16 14:27:20
【问题描述】：

博客和文章加载器中的任何地方都是在组件中创建的。我需要创建一个加载器并在整个应用程序中使用它。但问题是，在 ionic 3 中，我们无法手动关闭 loader。在出现如下正确代码后，应将其关闭：

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

但是不行，报错之类的。

Runtime Error Uncaught (in promise): removeView was not found

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

【问题讨论】：

您的意思是通过避免重复加载程序配置来避免数据冗余对吗？
是的！通过创建全局配置变量几乎没有帮助，但我们仍然需要在每个组件上导入和创建加载器。冗余！

标签： ionic-framework ionic3

【解决方案1】：

您收到该错误是因为您在加载程序未显示时调用了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();
}

【讨论】：

【解决方案2】：

  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() 函数中。

【讨论】：