Alerte avant de quitter la page (revenir) avec Ionique v2
Comment voulez-vous montrer un alert
, que l'utilisateur doit fermer, avant de revenir à la page précédente? Je suis l'aide de la norme <ion-navbar *navbar>
flèche.
J'ai essayé d'accrochage dans le NavController
événement ionViewWillLeave
comme ça, mais il ne fonctionne pas:
ionViewWillLeave() {
let alert = Alert.create({
title: 'Bye',
subTitle: 'Now leaving',
buttons: ['OK']
});
this.nav.present(alert);
}
Cela montre l'alerte, mais ne pas revenir en arrière une fois qu'il est fermé. Si j'en commentaire, le bouton de retour fonctionne très bien.
OriginalL'auteur Anders | 2016-06-21
Vous devez vous connecter pour publier un commentaire.
Mise à JOUR
De Ionic2 RC, maintenant, nous pouvons utiliser Nav Gardes.
Alors maintenant, nous pouvons faire quelque chose comme ceci:
Je préfère utiliser le
this.showAlertMessage
de la propriété, de sorte que nous pouvons avoir plus de contrôle sur le moment où nous nous devons de montrer l'alerte si l'utilisateur tente de quitter la page. Par exemple, nous pouvons avoir un formulaire dans la page, et si l'utilisateur n'a pas apporter des modifications, nous ne voulons pas afficher l'alerte (this.showAlertMessage = false
) et si le formulaire a été effectivement changé, nous voulons montrer l'avertissement (this.showAlertMessage = true
)VIEILLE RÉPONSE
Après quelques heures de la difficulté avec cela, j'ai trouvé la solution.
Un problème que j'ai eu à faire face est que la
ionViewWillLeave
est exécutée quand lesalert
est fermé ce qui rend les choses plus compliquées (lorsque leview
est sur le point d'être fermé parce que vous avez appuyé sur le bouton de retour, lealert
s'affiche, mais lorsque vous cliquez sur ok, qui déclenche l'événement nouveau et ouvre laalert
de nouveau et ainsi de suite...).Une autre chose à garder à l'esprit est que
ActionSheets
etAlerts
ajoutés à lanavigation stack
, doncthis.nav.pop()
au lieu de supprimer le point de vue actuel de la pile, supprime lealert
(et à cause de cela, nous pouvons nous sentir il ne fonctionne pas correctement).Cela étant dit, la solution que j'ai trouvé est:
Donc:
confirmedExit
variable pour savoir si vous avez déjà cliqué sur le bouton ok (si vous avez confirmé que vous vouliez quitter la page, et avec qui je sais que la prochaine fois que l'ionViewWillLeave
événement est déclenché, je n'ai pas à montrer lealert
)exitPage
méthode, d'abord, je nethis.nav.remove()
pour supprimer lealert
de la pile, et une fois cela fait, nous ne lethis.nav.pop()
pour revenir à la page précédente.mais que faire si l'utilisateur n'utilise pas que le bouton nouveau, mais l'android physique bouton de retour?
aaah, touché 🙂
Je suis effectivement d'avoir des problèmes à obtenir que cela fonctionne dans la RC3, la page permet de naviguer et de l'alerte s'affiche. Des idées?
oui vient de poster une nouvelle réponse 🙂
OriginalL'auteur sebaferreras
La solution retenue ne fonctionne pas dans la RC3, voici un nouveau à l'aide de Nav Contrôleur's Nav Garde:
Si vous naviguez à l'aide de push() sur la valeur liquidative du contrôleur, vous devez également faire une prise sur elle sinon il renvoie une erreur non gérée:
.\node_modules\@angular\core\src\error_handler.js:53 Error: Uncaught (in promise): false
Vous avez raison, dans le cas de l'utilisation de la poussée ou similaire à une capture doit être utilisé, j'ai édité la réponse, merci.
Ce doit être la accepté de répondre. @Cocowalla , implicite erreur de manutention seront ajoutés dans v
2.1.0
À l'aide de 2.1.0, changer le type de retour de la Promesse<{}> ou si vous obtenez une erreur d'incompatibilité de type. Autre que cela fonctionne un régal, merci!
Merci, c'est accepté de répondre. Il a travaillé pour moi.
OriginalL'auteur Boštjan Pišler
c'est ma version de Bostjan réponse, sans jeter exception non gérée.
OriginalL'auteur zer09