Ionic 2 cancel hard BACK button override -> To clo

Question

I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.

I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.

I created a custom behaviour to close the app:

private registerSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(e){
      this.platform.exitApp();
    }.bind(this),101);
  }
}

My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.

But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:

private deRegisterSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(e){return true},101);
  }
}

Or

private deRegisterSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(event){event.unbind()},101);
  }
}

But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?

Answer 1

I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).

First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:

it suggests not trying to override the default back button behavior.

So I've looked for other solutions. I've found one that is not really clean but works.

To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).

So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.

In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.

Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).

So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():

ionViewWillEnter(){
   this.navCtrl.parent._selectHistory=[];
}

This.navCtrl is my NavController object passed in the constructor of the page.

That's it.