Ionico 2: Come gestire il pulsante indietro hardware che controlla la conferma dell’Uscita in app

Mi trovo di fronte a un problema di come gestire il default mobile pulsante indietro che controlla la conferma, mentre l’uscita dall’applicazione, se ho premuto il pulsante indietro ci dovrebbe richiamare alcuni handler che mostra pop-up per confermare l’uscita.
O c’è qualche chiamata al metodo registerBackButtonAction()? o è così come si usa in IONICO 2,?
Si prega di aiutare anche me. Grazie in Anticipo.

 

7 Replies
  1. 26

    In app.componente.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();
              }
    • Ciao Sir, ho seguito il vostro cavo in uscita l’app sul pulsante indietro hardware e funziona come un fascino. Ma l’app va in background in modalità e voglio uccidere l’app invece della situazione precedente. E il alertCtrl è sparato più e più volte quando premo il pulsante hardware più volte(non È il alertctrl essere attivato solo una volta e dovrebbe essere disabilitato, poi, se c’è qualche modo per farlo, sarò felice di avere il vostro aiuto su di esso).Grazie 🙂
    • Ho fatto alcune modifiche al codice per affrontare più avvisi. Si prega di check it out.
    • questo.piattaforma.exitApp() per uscire dall’app con successo per me. Forse ti manca questo <nome preferenze=”SplashShowOnlyFirstTime” value=”false” /> nel file di configurazione.
    • Da dove viene questo.nav provengono da ?
    • dove è questa.nav provenienti da?
    • questa soluzione non funziona sempre quando una pagina viene inserito all’interno di una delle pagine in schede: stackoverflow.com/questions/46757910/…
    • Non l’ho provato, ma stackoverflow.com/a/41373775/2538207 dovrebbe essere di aiuto
    • questo.allerta.oggi();
    • Ho usato lo stesso metodo e funziona bene, ma ha uno svantaggio, se avete qualche ModalController aperto quindi toccare il pulsante indietro hardware su Android prende il nav controller pur mantenendo la modalità di navigazione.
    • come definire var avviso qui. come una stringa ?

  2. 16

    Ionico ultima versione 3.xx

    app.component.ts file:

    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({});
                }
            });
        });
    }
    • Si potrebbe si prega di spiegare a me su questo.nav e come utilizzare NavController in app.componente.ts
    • questa soluzione non funziona sempre quando una pagina viene inserito all’interno di una delle pagine in schede: stackoverflow.com/questions/46757910/…
    • grazie per la risposta ho scenario ho il menu laterale è anche preset becauce di quando vado in home page(schede pagina) a qualche altra pagina utilizzando sidemenu mio questo.nav.getActive(); mostra il bambino è una pagina che mostra solo la home page come pagina attiva qualche idea per fare pop, invece di mostrare il brindisi nella seconda pagina.
  3. 4

    Questo è il mio stato risolto e Codice di lavoro. Grazie a voi tutti.

    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

    Api della piattaforma ha un gestore registerBackButtonAction.

    Si può fare qualcosa di simile:

    In app.componente.ts

        constructor(platform: Platform){
         platform.ready().then(()=>{
           platform.registerBackButtonAction(()=>this.myHandlerFunction());
    })
    
    
      myHandlerFunction(){
        //create alert
         }
    • Grazie mille suraj. Il suo lavoro per me. Funziona come un fascino per me
    • Solo una modifica nel codice è che questo.myHandlerFunction() e ready() è la funzione di
    • come uccidere app
  5. 1

    Html:

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

    Dattiloscritto:

    import {Platform} from 'ionic-angular';
    
    @Page({ /*...*/ })
    export MyPage {
     constructor(platform: Platform) {
      this.platform = platform;
     }
     exitApp(){
      this.platform.exitApp();
     }
    }
    • Io non credo che questo è ciò che OP è di chiedere informazioni.. La domanda è su un gestore per il pulsante indietro hardware
    • Grazie Ramandeep Kaur per il vostro aiuto, ma voglio su hardware mobile pulsante indietro.
  6. 1

    Un pò tardi per la festa… Ma c’è di più per il pulsante indietro altro che chiudere la spinta pagine, specialmente per il progetto con diverse pagine scheda.

    A volte una pagina è spinto NON nella pagina principale, ma in una scheda di una pagina navCtrl. Quindi dobbiamo controllare tutti loro.

    Inoltre, se nessuna pagina o il menu è aperto, si dovrebbe cerchio intorno la maggior parte delle schede utilizzate più di recente (simile a Instagram app) e andare alla scheda precedente. Inoltre, non dobbiamo tornare indietro per ogni scheda più di una volta (simile a Instagram)

    Io mi sono ispirato da le risposte qui e ha creato un metodo completo che gestisce tutte le caratteristiche necessarie:

    • Menu laterale: Chiude il menu laterale se è stato aperto
    • Spinto pagine: Chiude tutte le pagine che potrebbero avere
      stato spinto su una qualsiasi delle pagine scheda’ nav controller
    • Switch tra le schede: Se il menu è stato chiuso, e non c’era spinto pagina, si dovrebbe prendere l’utente torna alla precedente scheda recenti utilizzando una pila.
    • Mostra avviso: Se non c’era già utilizzato di recente scheda, una finestra di avviso, devono chiedere all’utente se desidera uscire.

    I dettagli sono in questo post del blog

    Un codice demo può essere scaricata dal il mio github.

  7. 1

    Sono riuscito a creare questa funzione facendo un sacco di ricerca. Speranza che aiuta.

        //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 può essere utilizzato per trovare la relativa attivo portali che comprende avviso, caricatore, modale, etc. Se si desidera gestire il tutto con il pulsante indietro o di alcune di esse il commento in base al proprio utilizzo

    Nel mio caso ho solo voluto verificare se modale era attivo, quindi ho controllato solo per modali.

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

Lascia un commento