Angular 加载程序的单独组件：错误：未捕获（承诺中）：false

我已经创建了一个加载组件来显示和隐藏加载程序。 它在登录页面和主页上工作正常，但一旦我从另一个页面再次调用它，它就会给出错误

我想创建一个单独的组件来加载，而不是在每个页面中重复代码

错误：未捕获（承诺中）：false

下面是loading.modal.ts的代码

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


/**
 * Generated class for the LoadingModal component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'loading-modal',
  templateUrl: 'loading-modal.html',
  providers:[]
})
export class LoadingModal {

  text: string;
  loader: any;

  constructor( public loadingCtrl: LoadingController ) {
    this.text = 'Hello World';
    this.loader=this.loadingCtrl.create({
    content: 'Please wait...'
    });
  }

  showModal()
  {
    this.loader.present();
  }

  hideModal()
  {
    //alert("hide modal");
    this.loader.dismiss().catch(() => {});
  }

}

当按下下一页时，在主页上，然后在新页的构造函数中，我尝试再次显示加载程序

/**
 * Generated class for the ProductCatalog page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-product-catalog',
  templateUrl: 'product-catalog.html',
})
export class ProductCatalog {

public currentCatId:any;
public productArray=[];
public imageBaseUrl:string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public prdServ: ProductService,public appService:AppService, public loaderService: LoadingModal) {


      this.imageBaseUrl=appService.ThumbNailUrl
      this.currentCatId=navParams.get("catId");
      loaderService.showModal();
      prdServ.getProductsforCategory(this.currentCatId).subscribe(data => {

            this.productArray=data.items;
         loaderService.hideModal();      

        });
  }

  loadDescription(product){
  var p=product;

  this.navCtrl.push(ProductDescription,{product:p});

  }

  ionViewDidLoad() {
  }

}

以下是爱奥尼亚信息：

Cordova CLI: 7.0.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.4.0
Xcode version: Not installed

我读过很多帖子，人们都有同样的问题，但却不知道如何解决

---

谢谢

所以根据

请注意，组件被解除后，它将不可用 我们必须再创造一个。这可以通过以下方式避免： 以可重用的方式包装组件的创建和表示 功能如下面的用法部分所示

加载组件一旦解除，就不能再次使用。 i、 我们必须创建一个新的加载器，每次我们希望使用它。 因此，在我的load.modal.ts中，我将create方法移动到showModal方法。 因此，现在每次调用showModal时，都会创建一个新的加载程序并可供使用

export class LoadingModal {

  text: string;
  loader: any;

  constructor( public loadingCtrl: LoadingController ) {
    this.text = 'Hello World';

  }

  showModal()
  {
    this.loader=this.loadingCtrl.create({
    content: 'Please wait...'
    });
    this.loader.present();
  }

  hideModal()
  {
    //alert("hide modal");
    this.loader.dismiss().catch(() => {});
  }

}

---

不要在服务或提供者中创建覆盖组件，而是根据需要从组件类中创建它们。