2
votes

Ionic 4 ouverture modale depuis un autre modal: modal.create () n'est pas une fonction

J'essaie d'ouvrir une boîte de dialogue modale à partir d'une autre boîte de dialogue modale, en cherchant sur le Web, je peux voir que les gens l'ont déjà fait avant sans problème, mais je n'arrive pas à la faire fonctionner.

Lorsque j'essaye de créer mon deuxième composant modal à partir du premier composant modal, il dit:

TypeError: this.modal.create n'est pas une fonction

Voici mon code (découpé avec les parties pertinentes).

Component.module.ts

... 
export class QuizResultComponent implements OnInit {

    ...

    constructor(
    private modal: ModalController,
    private navParams: NavParams
  ) {}

    ...

    async openAnswerRecap(q) {
        const modal = await this.modal.create({ // This line throws the exception.
            component: AnswerRecapComponent,
            componentProps: {
                question: q.question
            }
        });

        return await modal.present();
    }

    ...

}

Voici comment j'ouvre le premier modal: Exam.page.ts

... 
export class ExamPage implements OnInit {

    ...

    constructor(
        private router: Router,
        private modal: ModalController
    ) {}

    ...

    async openModal(){
        // Creating the result modal
        const modal = await this.modal.create({
        component: QuizResultComponent,
        componentProps: {
            type: 'exam'
        }
        });

        // Registering back to menu event after dismiss
        modal.onDidDismiss().then(_ => this.router.navigate(['/menu']));

        // Showing modal
        return await modal.present();
    }

    ...

}

Et ceci est pour le deuxième modal de quiz-result.component.ts où l'exception est throw.

@NgModule({
  declarations: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  imports: [CommonModule, FormsModule, IonicModule, FontAwesomeModule],
  exports: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  entryComponents: [
    QuizResultComponent,
    AnswerRecapComponent
  ]
})
export class ComponentsModule {}

Je ne vois pas vraiment de problème avec ce code, y a-t-il quelque chose qui m'empêche d'ouvrir un modal à partir d'un autre composant modal?


1 commentaires

Tout va bien. Avez-vous importé le module de composants dans le module de page parent qui affiche ces deux modaux? par exemple. importations: [ComponentModule] J'ai également supprimé les modules appartenant aux composants modaux car cela peut générer une erreur d'importation en double


3 Réponses :


6
votes

Dans mon cas, j'ai créé sur le deuxième contrôleur modal un nom différent sur le constructeur, comme:

Premier modal: constructeur (modal privé: ModalController) Deuxième modal: constructeur (_modal privé: ModalController)

Et ajoutez dans votre module entryPoint pour 2 modaux.


1 commentaires

Je n'ai pas pensé à ça, j'essaierai quand j'aurai le temps. Merci !



1
votes

Ce qu'il faut retenir est qu'un modal dans Ionic v4 n'est qu'un composant, pas une page.

La façon dont je l'ai fait fonctionner était en important les deux modaux (déclarations, exportations et entryComponents) dans un module partagé et en important ce modal dans le module de la page parent qui les affiche. Similaire à ce que OP a fait.

J'ai également supprimé les modules générés par défaut par le cli (si vous avez fait un exemple de page g ionic).


0 commentaires

0
votes

J'ai rencontré le même problème, il existe une solution de contournement pour cela. Prenons que vous ayez trois à quatre modèles de fenêtres que vous devez appeler les uns après les autres comme une chaîne. U doit avoir le bouton ok ou suivant pour chaque fenêtre, sur la méthode de clic, appelez deux événements comme Onclick = create (): fermer Méthodes


0 commentaires