Ionic 2 overwrite back button function my way
I guess that most APP developers would not prefer a crude exit of their APP when the back button was pressed, and as you may already know using ionic you can register a callback on the back button pressed event. That is pretty straightforward, but what comes in the registered callback is mostly a matter of preference, but nevertheless, this method that I lately used works on the newest 3.1.1 Ionic version.
I will explain in just two phrases, what is the expected behavior:
The first thing that it will do it's will look to check if there is an active overlay view/component like a Modal, Toast, Alert and if there is it will dismiss that component.
Then it will check if a menu is opened, if it is it will close it, then it will check if the keyboard is opened, and close it in case previous was true, and lastly, it will check if you can go back taking into account the current page, and if you can't it will present a confirmation alert to exit the app.
Here is the code:
this.platform.registerBackButtonAction(() => {
let activePortal = this.app._appRoot._loadingPortal.getActive() ||
this.app._appRoot._modalPortal.getActive() ||
this.app._appRoot._toastPortal.getActive() ||
this.app._appRoot._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
return
} else if (this.menu.isOpen()) {
this.menu.close();
} else if (this.keyboard.isOpen()) {
this.keyboard.close();
return;
}
else {
if (this.nav.canGoBack()) {
this.nav.pop();
} else {
let alert = this.alertCtrl.create({
title: 'Ieșire',
message: 'Vrei sa ieși din aplicație?',
buttons: [
{
text: 'Da',
handler: () => {
this.platform.exitApp();
}
},
{
text: 'Nu',
role: 'cancel',
handler: () => {
// console.log('Clicked NU');
}
}
]
});
alert.present();
}
}
});
In the example above, app and keyboard variables are imported from Ionic App and Keyboard classes, and nav is retrieved using ViewChild.
Here is another example a bit more complex, I found on ionic forums:
this.platform.registerBackButtonAction(() => { if (this.keyboard.isOpen()) { // Handles the keyboard if open this.keyboard.close(); return; } let activePortal = this.ionicApp._loadingPortal.getActive() || this.ionicApp._modalPortal.getActive() || this.ionicApp._toastPortal.getActive() || this.ionicApp._overlayPortal.getActive(); //activePortal is the active overlay like a modal,toast,etc if (activePortal) { activePortal.dismiss(); return } else if (this.menuCtrl.isOpen()) { // Close menu if open this.menuCtrl.close(); return } let view = this.nav.getActive(); // As none of the above have occurred, its either a page pushed from menu or tab let activeVC = this.nav.getActive(); //get the active view let page = activeVC.instance; //page is the current view's instance i.e the current component I suppose if (!(page instanceof TabsPage)) { // Check if the current page is pushed from a menu click if (this.nav.canGoBack() || view && view.isOverlay) { this.nav.pop(); //pop if page can go back or if its an overlay over a menu page } else { this.showAlert(); } return; } let tabs = this.app.getActiveNav(); // So it must be a view from a tab. The current tab's nav can be accessed by this.app.getActiveNav(); if (!tabs.canGoBack()) { return this.showExitAlert(); } return tabs.pop(); }, 0);
Link to file: https://gitlab.flashsoft.eu/snippets/4