CODEWITHSUNDEEP
ionic2
usman
usman

Reputation: 3

Ionic 2 device back button prevent app exit in tabs

I am new to ionic framework.

I am facing a problem regarding ionic-2 app tabs, I have 3 tabs on my app view one is discovery and others are people and messages … The problem I am having is that when I am on message and people tabs and from my phone back button press I just simply exit from my app … what I want is when I click on other tabs I simply go to my home page which is discovery page and from there if I press back then I exit the app … Any one has any idea about this please let me know I will be thankful to you …

Upvotes: 0

Views: 497

Answers (2)

Dmitry Stepanov
Dmitry Stepanov

Reputation: 366

I solve that problem this way:

import { Navbar, Platform } from 'ionic-angular';
import { ViewChild } from '@angular/core';

export class Some_Page_With_Your_Three_Tabs {

    public backButtonAction: any;

    tab1Root = MainTab;        // your first tab
    tab2Root = MessagesTab;    // your second tab
    tab3Root = PeopleTab;      // your third tab

    @ViewChild(Navbar) navBar: Navbar;

    constructor(public platform: Platform, public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidEnter() {
        this.backButtonAction = this.platform.registerBackButtonAction(() => { 
            this.customHandleBackButton();
        }, 10);
        this.navBar.backButtonClick = (e: UIEvent) => { 
            this.customHandleBackButton();
        };
    }

    private customHandleBackButton(): void {
        if (weCanLeave) {
            this.navCtrl.pop({ animate: false });
        } else {
            return;
        }
    }
}

Upvotes: 0

kuche
kuche

Reputation: 3

you can resolve this by registering a new backButton-Action. In one of my projects, I used that to create an Alert, to prevent users from closing the App. You can ask the navCtrl on which page you are right now and then redirect the user, instead of closing the App.

Here is a little Snippet which should lead you to the solution:

this.platform.registerBackButtonAction(() => {
    let nav = this.app.getActiveNav();
    if (...){ // Ask what the current page is.
      // use setRoot on navCtrl to redirect to your preferred page
    }else{
      this.platform.exitApp();
    }
  });

Upvotes: 0

Related Questions