Separate component for Loader :Error: Uncaught (in promise): false

Question

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

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

ERROR 错误：未捕获（承诺）：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

我已经阅读了很多线程，其中人们遇到了同样的问题，但无法弄清楚如何解决这个问题。

谢谢！

Answer 1

所以根据 Doc

从评论中获取线索

Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.

加载组件一旦关闭就无法再次使用。也就是说，每次我们想使用它时，我们都必须创建一个新的加载器。所以在我的 loading.modal.ts 中，我将创建方法移到了 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(() => {});
  }

}

Separate component for Loader :Error: Uncaught (in promise): false

Separate component for Loader :Error: Uncaught (in promise): false

loader

ionic2

angular