ionic 3 tabs hardware back button won't exit

1
votes

I have an ionic 3 app based on the super template. I have set the root page to the following:

<ion-tabs>
    <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="bonfire"></ion-tab>
    <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>

When I press the hardware back button on this page, nothing happens at all. However, when I change the content to something else, like:

<p>Hello</p>

Then the hardware back button exits, as I would like.

How can I make the hardware back button work correctly on the tabbed page, while preserving the working default behaviour on other pages?

4
androidcordovaionic-frameworkionic3
the default behaviour of tabs (any tabs page) once the stack is empty then it will close it will not move to the previous tabs - Mohan Gopi
@MohanGopi my issue is that it never closes once the stack is empty. The back button does nothing once I'm on the tab page. - Daniel Centore
please comment all the registered back button action and then try you will get the default behaviour - Mohan Gopi
@MohanGopi There are none. I searched the entire project for registerBackButtonAction and found no results - Daniel Centore
then there must be some other issue why dont you try creating a new tabs project and simply install it in your device and check so that you will come to know what is the difference in back button action use this command to create project ionic start myApp tabs and deploye it in device - Mohan Gopi

4 Answers

5
votes

Inside your app.component.ts file 

import { Nav, App } from 'ionic-angular';

export class MyApp {
@ViewChild(Nav) nav: Nav;

and then

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

Hope this helps you and also don't forget to place it inside the platform.

in your respcted ts file where you need to close the application write a funtion

backButtonAction(){
  this.platfrom.exitApp();
}
1
votes

I ended up needing to do this in app.container.ts to get the desired behaviour:

platform.registerBackButtonAction(() => {
    let nav = app.getActiveNav();
    let activeView = nav.getActive();
    if (activeView != null){
        if (nav.canGoBack()) {
           nav.pop();
        } else if (nav.parent.getSelected() != nav.parent.getByIndex(0)) {
            // goes to the first tab
            nav.parent.select(0);
        } else {
            platform.exitApp();
        }
     }
});
0
votes

In your Tabs Page try to Add ionViewDidEnter and try to append the following class as follows:

ionViewDidEnter() {
                   this.platform.registerBackButtonAction(() => {
                        this.platform.exitApp();
                   });
             }
0
votes

Write your code inside the constructor() from which page you to leave.

Home.ts

 constructor(
    public navCtrl: NavController,
    private platform: Platform) {
    this.platform.registerBackButtonAction(()=>{
      this.platform.exitApp();
    });
  }