¿Cómo puedo manejar la parte posterior botón de acción en Iónica 2?

Quiero ser capaz de saber qué hacer en función de la página que se muestra al usuario.

No he encontrado una buena respuesta a esta pregunta, pero después de un tiempo me imaginé a mí misma una forma de hacerlo. Voy a compartir con todos vosotros.

Gracias

¿Por qué en la tierra las siguientes respuestas a esta pregunta es tan difícil y no se siente como la aplicación? : (¿Cuál sería la forma más simple, la forma más fácil ?
cómo son estos complcated?

OriginalEl autor Alexandre Justino | 2016-12-29

10 Comentarios

  1. 29

    Aquí es como yo lo hice:

    En cada elemento de Página, he creado una función llamada backButtonAction(), que se encargará de ejecutar código personalizado para cada página.

    Código:

    import { Component } from '@angular/core';
    import { Platform, NavController, ModalController } from 'ionic-angular';
    import { DetailsModal } from './details';
    
    @Component({
        selector: 'page-appointments',
        templateUrl: 'appointments.html'
    })
    export class AppointmentsPage {
        modal: any;
    
        constructor(private modalCtrl: ModalController, public navCtrl: NavController, public platform: Platform) {
            //initialize your page here
        }
    
        backButtonAction(){
            /* checks if modal is open */
            if(this.modal && this.modal.index === 0) {
                /* closes modal */
                this.modal.dismiss();
            } else {
                /* exits the app, since this is the main/first tab */
                this.platform.exitApp();
                //this.navCtrl.setRoot(AnotherPage);  <-- if you wanted to go to another page
            }
        }
    
        openDetails(appointment){
            this.modal = this.modalCtrl.create(DetailsModal, {appointment: appointment});
            this.modal.present();
        }
    }
    

    Y en el app.component.ts, he utilizado el platform.registerBackButtonAction método para registrar una devolución de llamada que será llamada cada vez que el botón atrás se hace clic. En el interior se puedo comprobar si la función backButtonAction existe en la página actual y la llame, si no existe, basta con ir a la principal y primera ficha.

    Se podría simplificar este si que no había necesidad de realizar acciones personalizadas para cada página. Sólo podía pop o salir de la aplicación.

    Yo lo hice de esta manera porque me necesarias para comprobar si el modal fue abierto en esta página en particular.

    Código:

      platform.registerBackButtonAction(() => {
        let nav = app.getActiveNav();
        let activeView: ViewController = nav.getActive();
    
        if(activeView != null){
          if(nav.canGoBack()) {
            nav.pop();
          }else if (typeof activeView.instance.backButtonAction === 'function')
            activeView.instance.backButtonAction();
          else nav.parent.select(0); //goes to the first tab
        }
      });
    

    si la página actual es la primera pestaña, la app se cierra (como se define en el backButtonAction método).

    vamos a nav = app.getActiveNav (); **¿qué es esta aplicación **
    Su una instancia de la App componente importado de ionic-angular
    estoy usando pestañas y sidemenu dentro de mi proyecto a la respuesta anterior, funciona bien, excepto por sidemenu parte cuando voy a la página de formulario de sidemenu no soy capaz de navegar a la espalda estoy recibiendo el nombre de componente como página de inicio, incluso si estoy en alguna otra página cuando voy a alguna página de menú lateral no estoy viendo pestañas es esto algo que causa el error y cualquier ayuda cómo navegar a la página de inicio(tabspage)

    OriginalEl autor Alexandre Justino

  2. 7

    Iónica Última versión 3.xx de la aplicación.componente.archivo ts 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({});
        }
      });
    
    });
    
    }
    

    OriginalEl autor Mohamed Arshath

  3. 6

    He utilizado las respuestas de aquí y de otras fuentes para lograr lo que yo necesitaba.
    Me di cuenta de que al generar la aplicación para la producción (–prod) este enfoque no funciona, porque de JS uglifying y simplificando:

    this.nav.getActive().name == 'PageOne'
    

    Debido a eso, yo uso el siguiente en la instrucción «if»:

    view.instance instanceof PageOne
    

    Por lo que el código final se parece a esto:

    this.platform.ready().then(() => {
    
      //Back button handling
      var lastTimeBackPress = 0;
      var timePeriodToExit = 2000;
      this.platform.registerBackButtonAction(() => {
        //get current active page
        let view = this.nav.getActive();
        if (view.instance instanceof PageOne) {
          if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
              this.platform.exitApp(); //Exit from app
          } else {
            let toast = this.toastCtrl.create({
              message: 'Tap Back again to close the application.',
              duration: 2000,
              position: 'bottom',
            });
            toast.present();     
            lastTimeBackPress = new Date().getTime();
          } 
        } else if (view.instance instanceof PageTwo || view.instance instanceof PageThree) {
          this.openPage(this.pages[0]);
        } else {
          this.nav.pop({}); //go to previous page
        }
      });
    });
    

    OriginalEl autor airjure

  4. 3

    Como por Iónico 2 RC.4 documentación de aquí:

    Puede utilizar registerBackButtonAction(callback, priority) método de Platform API para registrar la acción en la parte de atrás pulse el botón.

    El botón atrás evento se desencadena cuando el usuario presiona el nativo de la plataforma botón de atrás, también conocido como el «hardware» en el botón atrás. Este evento sólo se utiliza dentro de Córdoba aplicaciones que se ejecutan en Android y plataformas de Windows. Este evento no se desencadena en iOS desde iOS no viene con un hardware botón atrás en el mismo sentido, un Android o dispositivos de Windows.

    El registro de un nuevo hardware botón de acción y el establecimiento de una prioridad permite que las aplicaciones para el control de la acción que debe ser llamado cuando el nuevo hardware se pulsa el botón. Este método se decide que la registrada en el botón atrás de acciones tiene la más alta prioridad y debe ser llamado.

    Parámetros :

    • de devolución de llamada : Función que será llamada cuando se pulsa el botón atrás, si esta registrada la acción tiene la prioridad más alta.
    • prioridad : Número para establecer la prioridad de esta acción. Sólo la más alta prioridad se va a ejecutar. El valor predeterminado es 0

    Devuelve: Función : Una función que, cuando se llama, va a la onu a registrar el botón atrás de acción.

    OriginalEl autor Prerak Tiwari

  5. 0

    Yo era capaz de lograr esto en el caso de que simplemente estamos a la configuración de la raíz páginas…

    import {Component, ViewChild, Injector} from '@angular/core';
    import {Platform, MenuController, Nav, App, IonicApp, NavController} from 'ionic-angular';
    import {StatusBar} from '@ionic-native/status-bar';
    import {SplashScreen} from '@ionic-native/splash-screen';
    import {InvitesPage} from "../pages/invites/invites";
    import {RewardsPage} from "../pages/rewards/rewards";
    import {ConnectionsPage} from "../pages/connections/connections";
    import {MessagesPage} from "../pages/messages/messages";
    import {ResourcesPage} from "../pages/resources/resources";
    import {SignoutPage} from "../pages/signout/signout";
    import {DashboardPage} from "../pages/dashboard/dashboard";
    import {AccountPage} from "../pages/account/account";
    import {HomePage} from "../pages/home/home";
    import {TriviaPage} from "../pages/trivia/trivia";
    import {Events} from "ionic-angular/util/events";
    
    
    @Component({
      templateUrl: 'app.html'
    })
    export class MyApp {
      @ViewChild(Nav) nav: NavController;
      //make HelloIonicPage the root (or first) page
    
      public rootPage: any; //if logged in, go to dashboard.
      public pages: Array<{title: string, component: any}>;
      public user: any;
      public routeHistory: Array<any>;
    
      constructor(public platform: Platform,
                  public menu: MenuController,
                  public statusBar: StatusBar,
                  public splashScreen: SplashScreen,
                  private _app: App,
                  private _ionicApp: IonicApp,
                  private _menu: MenuController,
                  protected injector: Injector,
                  public _events: Events) {
    
        this.initializeApp();
    
        //set our app's pages
        this.pages = [
          {title: 'My Account', component: AccountPage},
          {title: 'Dashboard', component: DashboardPage},
          {title: 'Invites', component: InvitesPage},
          {title: 'Rewards', component: RewardsPage},
          {title: 'Connections', component: ConnectionsPage},
          {title: 'Messages', component: MessagesPage},
          {title: 'Resources', component: ResourcesPage},
          {title: 'Trivia', component: TriviaPage},
          {title: 'Sign Out', component: SignoutPage}
    
        ];
    
        this.routeHistory = [];
        this.user = {firstName: ''};
    
      }
    
      initializeApp() {
    
        this.platform.ready().then(() => {
    
          this._setupBrowserBackButtonBehavior();
    
          let self = this;
          if (sessionStorage.getItem('user')) {
            this.user = JSON.parse(sessionStorage.getItem('user'));
            self.rootPage = TriviaPage;
          } else {
            self.rootPage = HomePage;
          }
    
          this.routeHistory.push(self.rootPage);
          //Okay, so the platform is ready and our plugins are available.
          //Here you can do any higher level native things you might need.
          this.statusBar.styleDefault();
          this.splashScreen.hide();
        });
      }
    
      openPage(page) {
        //close the menu when clicking a link from the menu
        this.menu.close();
        //navigate to the new page if it is not the current page
        this.nav.setRoot(page.component);
        //store route history
        this.routeHistory.push(page.component);
      }
    
    
      private _setupBrowserBackButtonBehavior() {
    
        //Register browser back button action(s)
        window.onpopstate = (evt) => {
    
          //Close menu if open
          if (this._menu.isOpen()) {
            this._menu.close();
            return;
          }
    
          //Close any active modals or overlays
          let activePortal = this._ionicApp._loadingPortal.getActive() ||
            this._ionicApp._modalPortal.getActive() ||
            this._ionicApp._toastPortal.getActive() ||
            this._ionicApp._overlayPortal.getActive();
    
          if (activePortal) {
            activePortal.dismiss();
            return;
          }
    
          if (this.routeHistory.length > 1) {
            this.routeHistory.pop();
            this.nav.setRoot(this.routeHistory[this.routeHistory.length - 1]);
          }
    
    
        };
    
        //Fake browser history on each view enter
        this._app.viewDidEnter.subscribe((app) => {
          if (this.routeHistory.length > 1) {
            history.pushState(null, null, "");
          }
    
        });
    
      }
    }
    

    OriginalEl autor Judson Terrell

  6. 0

    He encontrado el manera más Fácil, sólo tiene que añadir el siguiente código en app.component:

    this.platform.registerBackButtonAction((event) => {
        let activePortal = this.ionicApp._loadingPortal.getActive() ||
        this.ionicApp._modalPortal.getActive() ||
        this.ionicApp._toastPortal.getActive() ||
        this.ionicApp._overlayPortal.getActive();
        if(activePortal && activePortal.index === 0) {
            /* closes modal */
            activePortal.dismiss();
        } else {
            if(this.nav.getActive().name == 'Homepage') {    //your homepage
                this.platform.exitApp();
            }
            else {
                if(this.nav.canGoBack())
                    this.nav.pop();
                this.nav.setRoot(Homepage);
            }
        }
    },101);
    

    Que es! No hay necesidad de añadir código adicional en cada página!

    OriginalEl autor Tushar Walzade

  7. 0

    He Investigado Muchas Cosas para el regreso del botón de la manija Finalmente he Encontrado una Buena Solución para iónica última Versión 3.xx

    //Check Hardware Back Button Double Tap to Exit And Close Modal On Hardware Back
          let lastTimeBackPress = 0;
          let timePeriodToExit  = 2000;
          this.platform.registerBackButtonAction(() => {
              let activePortal = this.ionicApp._loadingPortal.getActive() || //Close If Any Loader Active
              this.ionicApp._modalPortal.getActive() ||  //Close If Any Modal Active
              this.ionicApp._overlayPortal.getActive(); //Close If Any Overlay Active
              if (activePortal) {
                  activePortal.dismiss();
              }
              else if(this.nav.canGoBack()){
                this.nav.pop();
              }else{
                  //Double check to exit app
                  if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                      this.platform.exitApp(); //Exit from app
                  } else {
                    this.toast.create("Press back button again to exit");
                    lastTimeBackPress = new Date().getTime();
                  }
              }            
          });
    

    OriginalEl autor Mohamed Arshath

  8. 0

    Iónica 3 Carga Diferida, nunca he sentido la necesidad de Manejo de la espalda comportamiento de navegador donde, como para la plataforma.es(‘córdoba’) he creado el siguiente método que se encarga de todos los escenarios:

    //If a view controller is loaded. Just dismiss it.
    let nav = this.app.getActiveNav();
    let activePortal = this._ionicApp._loadingPortal.getActive() ||
    this._ionicApp._modalPortal.getActive() ||
    this._ionicApp._toastPortal.getActive() ||
    this._ionicApp._overlayPortal.getActive();
    if(activePortal && activePortal.index === 0) {
        /* closes modal */
        activePortal.dismiss();
        return;
    }
    
    //If a state is pushed: Pop it.
    if (this.nav.canGoBack()) {
      this.nav.pop();
      return;
    } else 
    //Else If its a tabs page: 
    if (this.nav.getActiveChildNav()) {     
        const tabs: Tabs = this.nav.getActiveChildNav();
        const currentTab = tabs.getActiveChildNavs()[0];
        //If any page is pushed inside the current tab: Pop it
        if(currentTab.canGoBack()) {
          currentTab.pop();
          return;
        }
        else 
        //If home tab is not selected then select it.
        if(tabs.getIndex(currentTab) !=0){
          tabs.select(0);
          return;
        }
    }
    else 
    //If a menu is open: close it.
    if (this.menu.isOpen()) {
      this.menu.close();
      return;
    }
    
    
    
    
    if (this.exitApp) {
      this.platform.exitApp();
      return;
    }
    this.exitApp = true;
    
    const toast = this.toastCtrl.create({
      message: this.exitMessage || 'press again to exit',
      duration: 4000,
      position: 'bottom',
      cssClass: 'exit-toastr',
    });
    toast.present();
    setTimeout(() => {
      this.exitApp = false;
    }, 2000);
    

    OriginalEl autor Arslan Ali

  9. 0

    usted puede probar esto de funciones :

    registerBackButton() {
            this.platform.registerBackButtonAction(() => {
                if (this.menu.isOpen()) {
                    console.log("Menu is open!", "loggedInMenu");
                    this.menu.close();
                    console.log("this.menu.isOpen(): " + JSON.stringify(this.menu.isOpen()));
                    return;
                }
                console.log("Checking for other pages");
    
                let checkHomePage = true;
                let max = Globals.navCtrls.length;
                for (let i = 0; i < Globals.navCtrls.length; i++) {
                    let n = Globals.navCtrls[i];
                    if (n) {
                        if (n.canGoBack()) {
                            console.log("Breaking the loop i: " + JSON.stringify(i));
                            let navParams = n.getActive().getNavParams();
                            if (navParams) {
                                console.log("navParams exists");
                                let resolve = navParams.get("resolve");
                                if (resolve) {
                                    n.pop().then(() => resolve({}));
                                } else {
                                    n.pop();
                                }
                            } else {
                                n.pop();
                            }
                            checkHomePage = false;
                            return;
                        }
                    } else console.log("n was null!");
                }
    
                if (this.nav.getActive().instance instanceof TabsPage && !this.nav.canGoBack()) {
                    let popPageVal = this.backbuttonService.popPage();
                    console.log("popPageVal: " + JSON.stringify(popPageVal));
                    if (popPageVal >= 0) {
                        console.log("Switching the tab to: ", popPageVal);
                        this.switchTab(popPageVal);
                    } else {
                        console.log("Last page is HomePage");
    
                        if (this.alert) {
                            this.alert.dismiss();
                            this.alert = null;
                        } else {
                            this.showAlert();
                        }
                    }
                } else {
                    console.log("Last page is not HomePage");
                    if (this.nav.canGoBack()) {
                        console.log("We can go back!");
                        this.nav.pop();
                    }
                }
            });
        }
    
        showAlert() {
            this.alert = this.alertController.create({
                title: "Exit?",
                message: "Are you sure you want to exit?",
                buttons: [
                    {
                        text: "Cancel",
                        role: "cancel",
                        handler: () => {
                            this.alert = null;
                        }
                    },
                    {
                        text: "Exit",
                        handler: () => {
                            this.platform.exitApp();
                        }
                    }
                ]
            });
            this.alert.present();
        }
    
        switchTab(tabIndex) {
            if (Globals.tabs && tabIndex >= 0) {
                console.log("Switch condition met");
                Globals.tabIndex = tabIndex;
                Globals.tabs.select(tabIndex);
                Globals.tabs.selectedIndex = tabIndex;
            }
        }
    

    Espero sus obras con usted.

    OriginalEl autor Amr AbdelRahman

Dejar respuesta

Please enter your comment!
Please enter your name here