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.
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();
}
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.
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:
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();
)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();
}