web-dev-qa-db-fra.com

ionic 4 utilisant des modaux via le modalcontroller

J'utilise Ionic 4 et je cherche à utiliser des modaux en utilisant ModalController. Dans Ionic 3.x, c'était assez simple, mais je reçois un nombre d'erreurs dans Ionic 4:

La page dans laquelle j'essaie de lancer le Modal:

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, ModalController } from '@ionic/angular';
import { MyModalPage } from '../MyModalPage/MyModalPage.page';

@Component({
  selector: 'app-product-display',
  templateUrl: './product-display.page.html',
  styleUrls: ['./product-display.page.scss'],
})
export class ProductDisplayPage implements OnInit {

  private params:any = {};
  public product:product = {};

  constructor(

    public modalCtrl : ModalController
  ) { 

  }//End of Constructor

  ngOnInit() {
  }

  async openModal()
  {

    var data = { message : 'hello world' };

    const modalPage = await this.modalCtrl.create({
      component: MyModalPage, 
      componentProps:{values: data}
    });

    return await modalPage.present();
  }

}

Ma page modale:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.html',
  styleUrls: ['./my-modal.page.scss'],
})
export class MyModalPage implements OnInit {

  constructor(

  ) { }//End of Constructor

  ngOnInit() {
  }//End of ngOnInit

  closeModal()
  {


    //TODO: Implement Close Modal this.viewCtrl.dismiss();
  }

}//End of Class

Je reçois une erreur pour indiquer qu'il peut ne pas être inclus dans les composants d'entrée:

ERREUR Erreur: non intercepté (en promesse): erreur: aucune fabrique de composants trouvée pour MyModalPage. L'avez-vous ajouté à @ NgModule.entryComponents? Erreur: aucune fabrique de composants trouvée pour MyModalPage. L'avez-vous ajouté à @ NgModule.entryComponents?

Lorsque je l'ajoute aux composants d'entrée du module d'affichage du produit, j'obtiens ensuite une autre erreur indiquant qu'il n'a pas été importé. Lorsque je l'ajoute aux importations du module d'affichage de produit, j'obtiens ce qui suit:

core.js: 1671 ERREUR Erreur: non interceptée (en promesse): erreur: directive inattendue "MyModalPage" importée par le module "ProductDisplayPageModule". Veuillez ajouter une annotation @NgModule. Erreur: directive inattendue "MyModalPage" importée par le module "ProductDisplayPageModule". Veuillez ajouter une annotation @NgModule.

Comment utiliser le contrôleur modal pour présenter un modal dans Ionic 4/Angular 6?

Merci

angularionic-frameworkmodal-dialog
8
user3836415

Malheureusement, les Ionic v4 Modals ne peuvent pas charger une page paresseusement (pourtant, je m'attends à ce que cela soit possible plus tard). Vous devez donc importer le composant comme vous l'avez fait, cependant, vous devez également ajoutez-le aux déclarations dans le module d'application. Comme ceci:

@NgModule({
    declarations: [
        AppComponent,
        MyModalPage
    ],
    entryComponents: [
        MyModalPage
],
...

J'espère que cela t'aides! Je suis sûr que la documentation s'améliorera sur ce point, car j'ai également rencontré ce problème.

13
bashoogzaad