Separate Komponente für Loader: Fehler: Nicht abgefangen (in Versprechen): false

Question

Ich habe eine Ladekomponente zum Anzeigen und Verbergen von Loader erstellt. es funktioniert auf der Anmeldeseite und Homepage, Bus, sobald ich es von einer anderen Seite wieder nenne es dem Fehler

ich zum Laden eine separate Komponente erstellen möge gibt und nicht den Code auf jeder Seite wiederholen

ERROR Fehler: Uncaught (in Versprechen): false

Unten finden Sie den Code der 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(() => {}); 
    } 

} 

von der Startseite, wenn die nächste Seite dann im Konstruktor der gedrückt wird Neue Seite versuche ich zu zeigen der Lader wieder

/** 
* 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() { 
    } 

} 

Unterhalb der ionischen Info:

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 

ich viele Threads gelesen haben, wo die Menschen das gleiche Problem haben, aber nicht in der Lage, um herauszufinden, wie diese zu lösen.

Danke!

Answer 1

So nehmen Ahnung von der Kommentar als pro Komponente 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.

Laden einmal nicht wieder verwendet werden entlassen kann. d. H. Wir müssen jedes Mal einen neuen Lader erstellen, wenn wir ihn benutzen wollen. So in meinem loading.modal.ts ich zog die create-Methode auf die showModal Methode. Also jedes Mal, wenn showModal aufgerufen wird, wird ein neuer Loader erstellt und steht zur Verfügung.

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

}