Ionic 2: Comment gérer le bouton retour matériel qui vérifie la confirmation de la sortie dans l'application

Je suis confronté à un problème, comment gérer les mobiles par défaut du bouton retour qui vérifie la confirmation alors que la sortie de l'application, si j'ai appuyé sur le bouton de retour, il doit invoquer certaines gestionnaire qui montre les pop-up, pour confirmer la sortie.
OU il est tout appel de méthode registerBackButtonAction()? ou est-il donc comment l'utiliser dans IONIQUE 2,?
Merci de m'aider. Merci à l'Avance.

source d'informationauteur Tushar Rmesh Saindane

  1. 23

    Dans l'app.composante.ts

            @ViewChild(Nav) nav: Nav;
constructor(private platform: Platform, private toastCtrl:   ToastController, private alertCtrl: AlertController) {
platform.ready().then(() => {
//Okay, so the platform is ready and our plugins are available.
//Here you can do any higher level native things you might need
platform.registerBackButtonAction(() => {
//uncomment this and comment code below to to show toast and exit app
//if (this.backButtonPressedOnceToExit) {
//  this.platform.exitApp();
//} else if (this.nav.canGoBack()) {
//  this.nav.pop({});
//} else {
//  this.showToast();
//  this.backButtonPressedOnceToExit = true;
//  setTimeout(() => {
//    this.backButtonPressedOnceToExit = false;
//  },2000)
//}
if(this.nav.canGoBack()){
this.nav.pop();
}else{
if(this.alert){ 
this.alert.dismiss();
this.alert =null;     
}else{
this.showAlert();
}
}
});
});
}
showAlert() {
this.alert = this.alertCtrl.create({
title: 'Exit?',
message: 'Do you want to exit the app?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
this.alert =null;
}
},
{
text: 'Exit',
handler: () => {
this.platform.exitApp();
}
}
]
});
alert.present();
}
showToast() {
let toast = this.toastCtrl.create({
message: 'Press Again to exit',
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
  2. 14

    Ionique dernière version 3.xx

    app.component.ts fichier:

    import { Platform, Nav, Config, ToastController } from 'ionic-angular';
constructor(public toastCtrl: ToastController, public platform: Platform) {
platform.ready().then(() => {
//back button handle
//Registration of push in Android and Windows Phone
var lastTimeBackPress = 0;
var timePeriodToExit  = 2000;
platform.registerBackButtonAction(() => {
//get current active page
let view = this.nav.getActive();
if (view.component.name == "TabsPage") {
//Double check to exit app
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
this.platform.exitApp(); //Exit from app
} else {
let toast = this.toastCtrl.create({
message:  'Press back again to exit App?',
duration: 3000,
position: 'bottom'
});
toast.present();
lastTimeBackPress = new Date().getTime();
}
} else {
//go to previous page
this.nav.pop({});
}
});
});
}
  3. 4

    C'est mon résolu et le Code de travail. Merci à vous tous. 

    constructor(platform: Platform,public alertCtrl: AlertController,public toastCtrl:ToastController) {
platform.ready().then(()=>{
platform.registerBackButtonAction(()=>this.myHandlerFunction());
StatusBar.styleDefault();
Splashscreen.hide();
})
}
myHandlerFunction(){
let toast = this.toastCtrl.create({
message: "Press Again to Confirm Exit",
duration: 3000
});
toast.present(); 
}
  4. 4

    Plate-forme de l'api a un gestionnaire registerBackButtonAction.

    Vous pouvez faire quelque chose comme:

    Dans l'app.composante.ts

        constructor(platform: Platform){
platform.ready().then(()=>{
platform.registerBackButtonAction(()=>this.myHandlerFunction());
})
myHandlerFunction(){
//create alert
}
  5. 1

    Html:

    <button (click)="exitApp()">Close application<button>

    Tapuscrit:

    import {Platform} from 'ionic-angular';
@Page({ /*...*/ })
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
}
exitApp(){
this.platform.exitApp();
}
}
  6. 1

    Un peu en retard à la fête... Mais il n'y a plus de bouton de retour autre que la fermeture de la poussée pages, spécialement pour un projet avec plusieurs onglets.

    Parfois, une page est poussé PAS dans la racine de la page, mais dans une de la page de l'onglet du navCtrl. Nous avons donc à vérifier pour chacun d'eux.

    Aussi, si aucune page ou le menu est ouvert, nous devrions cercle autour de la plupart des onglets récemment utilisés (similaire à Instagram app) et revenir à l'onglet précédent. En outre, nous ne devrions pas revenir à chaque onglet plus d'une fois (similaire à Instagram)

    Je suis inspiré par les réponses ici et a créé une méthode complète qui gère toutes les fonctionnalités nécessaires:

    • Menu latéral: Ferme le menu de gauche si elle était ouverte
    • Poussé pages: Ferme toutes les pages
      été poussé sur les pages à onglet’ nav contrôleur
    • Basculer entre les onglets: Si le menu a été fermé, et il n'y avait pas poussé à la page, il devrait prendre à l'utilisateur de retourner à la précédente récemment utilisé onglet à l'aide d'une pile.
    • Afficher une alerte: Si il n'y avait pas de précédent récemment utilisé onglet, une boîte d'alerte doit demander à l'utilisateur s'il souhaite quitter.

    Les détails sont dans ce post de blog

    Un code de démonstration peut être téléchargée à partir de mon github.

  7. 0

    J'ai réussi à créer cette fonction en faisant beaucoup de recherche. Espérons que cela aide.

        //I am using this.isExitAlertOpen just to make sure that the alert does not open if already open.
handleBackButton() {
this.platform.registerBackButtonAction(() => {
//const activePortal =
//this.ionicApp._modalPortal.getActive() ||
//this.ionicApp._loadingPortal.getActive() ||
//this.ionicApp._toastPortal.getActive() ||
//this.ionicApp._overlayPortal.getActive();
//console.warn('ACTIVE PORTALS', activePortal);
const activeModal = this.ionicApp._modalPortal.getActive();
console.warn('MODAL', activeModal);

    activePortal peut être utilisé pour trouver les actifs des portails qui comprend alerte, chargeur, modal, etc. Si vous souhaitez gérer le tout avec le bouton de retour ou de certains d'entre eux décommentez en fonction de votre utilisation

    Dans mon cas, j'ai seulement voulu vérifier si modale a été actif donc j'ai vérifié seulement modale.

            // if (activePortal) {
//   activePortal.dismiss();
// }
if (activeModal) {
activeModal.dismiss();
} else if (this.nav.canGoBack()) {
this.nav.pop();
} else {
if (this.isExitAlertOpen) return;
this.isExitAlertOpen = true;
this.showExitAlert();
}
});
}
showExitAlert() {
this.alertCtrl.create({
title: 'Exit',
message: 'Are you sure you want to exit the app?',
enableBackdropDismiss: false,
buttons: [
{
text: 'Yes',
handler: () => {
this.isExitAlertOpen = false;
this.platform.exitApp();
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
this.isExitAlertOpen = false;
}
}
]
}).present();
}