web-dev-qa-db-fra.com

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

Je suis confronté à un problème de gestion du bouton arrière du mobile par défaut qui vérifie la confirmation lors de la sortie de l'application, si j'appuie sur le bouton arrière, il devrait invoquer un gestionnaire qui affiche une fenêtre contextuelle, pour confirmer la sortie. OR il existe une méthode appelez registerBackButtonAction ()? Ou est-ce donc comment l'utiliser dans IONIC 2 ,? Veuillez m'aider. Merci d'avance.

androidangularionic2
10
Tushar Rmesh Saindane

Ceci est mon code résolu et fonctionnel. Merci tout le monde.

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
Tushar Rmesh Saindane

Dans app.component.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();
          }
26
nabin

Ionic la 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({});
            }
        });
    });
}
16
Mohamed Arshath

Platform api a un gestionnaire registerBackButtonAction.

Vous pouvez faire quelque chose comme:

Dans app.component.ts

    constructor(platform: Platform){
     platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
})


  myHandlerFunction(){
    //create alert
     }
4
Suraj Rao

Un peu tard pour la fête ... Mais il n'y a plus de bouton de retour autre que la fermeture des pages poussées, spécialement pour les projets avec plusieurs pages à onglets.

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

De plus, si aucune page ou menu n'est ouvert, nous devons encercler les derniers onglets utilisés (similaires à l'application Instagram) et revenir à l'onglet précédent. De plus, nous ne devons pas revenir à chaque onglet plus d'une fois (similaire à Instagram)

Je me suis inspiré des réponses ici et j'ai créé une méthode complète qui gère toutes les fonctionnalités nécessaires:

  • Menu latéral : ferme le menu latéral s'il était ouvert
  • Pages poussées : ferme toutes les pages qui auraient pu être poussées sur l'un des contrôleurs de navigation des pages à onglet
  • Basculer entre les onglets : Si le menu était fermé et qu'il n'y avait pas de page poussée, cela devrait ramener l'utilisateur à l'onglet précédent récemment utilisé en utilisant une pile .
  • Afficher l'alerte : S'il n'y avait aucun onglet récemment utilisé, une boîte d'alerte devrait demander à l'utilisateur s'il souhaite quitter.

Les détails sont dans ce article de blog

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

1
Ari

Html:

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

Manuscrit:

import {Platform} from 'ionic-angular';

@Page({ /*...*/ })
export MyPage {
 constructor(platform: Platform) {
  this.platform = platform;
 }
 exitApp(){
  this.platform.exitApp();
 }
}
1
Ramandeep Kaur

J'ai réussi à créer cette fonction en faisant beaucoup de recherches. J'espère que ça 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 portails actifs pertinents qui incluent l'alerte, le chargeur, le modal, etc. Si vous voulez tout gérer avec le bouton de retour ou certains décommenter selon votre utilisation

Dans mon cas, je voulais seulement vérifier si le modal était actif, donc je n'ai vérifié que le modal.

        //  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();
}
1
d_bhatnagar