web-dev-qa-db-fra.com

Fermer Modal dans Ionic 4 by Back Button

J'ai un Modal dans Ionic 4. Je voudrais fermer cela, lorsqu'un utilisateur appuie sur bouton retour sur son mobile (ou sur le bouton retour de son navigateur).

Est-ce que quelqu'un sait comment je peux faire ça?

EDIT: Plus de détails:

J'ai un bouton qui ouvre mon modal:

async onClick() {
  const modal = await this.modalController.create({
    component: Foo,
  });
  return await modal.present();
}

Le composant Foo n'a pas beaucoup plus de contenu qu'un bouton qui ferme le modal: this.modalController.dismiss();. Jusqu'ici tout va bien.

Sur mon mobile, cependant, l'application se ferme maintenant lorsque le modal est ouvert et que l'utilisateur appuie sur le bouton de retour du mobile. Mais dans ce cas, seul le modal devrait fermer.

modal-dialogionic4
5
Markus

La réponse d'Enol m'a aidé à trouver une solution, merci pour cela.

platform.registerBackButtonAction n'existe plus dans la v4. J'ai essayé platform.backButton.subscribe à la place, mais cela n'a pas fonctionné. Ce qui fonctionne est le suivant:

private backbuttonSubscription: Subscription;

constructor(private modalCtrl: ModalController) {

ngOnInit() {
    const event = fromEvent(document, 'backbutton');
    this.backbuttonSubscription = event.subscribe(async () => {
        const modal = await this.modalCtrl.getTop();
        if (modal) {
            modal.dismiss();
        }
    });
}

ngOnDestroy() {
    this.backbuttonSubscription.unsubscribe();
}
3
Markus

Oui, sont presque sur le chemin .... il vous suffit de changer la partie HTML. Je l'ai fait de cette façon.

<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
          <ion-button color="dark" (click)="closeModal()">
              <ion-icon name="arrow-back"></ion-icon>
            </ion-button>
      </ion-buttons>
     <ion-title>Create Pin</ion-title> 
    </ion-toolbar>
  </ion-header>

après cela, il vous suffit de créer une fonction qui fermera votre popup modal. dans votre fichier ts

closeModal() {
    this.modalCtrl.dismiss();
  }

J'espère que cela vous aidera.

1
Surya prakash chaturvedi

Vous pouvez utiliser la méthode registerBackButtonAction que contient le service Platform. Cette méthode permet de remplacer l'action native par défaut du bouton de retour matériel. La méthode accepte une fonction de rappel comme paramètre où vous pouvez implémenter votre logique. En résumé, vous devez procéder comme suit:

  • Injectez le service Platform dans le composant Foo.
  • Appelez registerBackButtonAction dans ngOnInit (ou une autre méthode init) et passez un rappel de fonction en tant que paramètre qui exécute la logique pour fermer le modal (this.modalController.dismiss();)
  • Effacez l'action lorsque le composant modal est fermé (par exemple dans la méthode ngOnDestroy). Pour ce faire, registerBackButtonAction renvoie une fonction qui, lorsqu'elle est appelée, l'action est supprimée.

Le code devrait être quelque chose comme:

constructor(private platform: Platform) {
    ...
}

ngOnInit() {
    this.unregisterBackAction = this.platform.registerBackButtonAction(() => {
        this.modalController.dismiss();
    })
}

ngOnDestroy() {
    if(this.unregisterBackAction) this.unregisterBackAction();
}
1
Enol Casielles Martinez