ionic 3 - registerBackButtonAction - can't get the active pushed pages

Question

My application navigation goes like this:

• Login Page (set as Root)
• TabsPage (set as Root, once login is success)
  • ListPage (ion-tab root)
    • FilterPage (opens as Modal)
    • DetailsPage (Page is pushed)
  • SearchPage (ion-tab root)
  • SettingsPage (ion-tab root)
    • History (Page is pushed)
      • HistoryDetailsPage (Page is pushed)

Problem is kind of same as this question. But that didn't help me.

Problem:

Whenever I press hardware back button from pushed Pages or ion-tab root pages, I see only the ["TabsPage"] for nav.getViews() in the back button event of app.component.ts. How can I get the name of Pushed Page in that global back button event?

CODE FOR REFERENCE:

app.component.ts:

constructor(..., private platform: Platform,private modalCtrl: ModalController,private ionicApp: IonicApp,private app: App, ...) {
  // ...
  this.registerAction();
}

registerAction(): void {
  if (this.platform.is("android")) {
    this.unRegisterBackButtonAction = this.platform.registerBackButtonAction(
      (event) => {
        this.backButtonClick();
      }
    );
  }
}

backButtonClick() {
  let views = this.nav.getViews().map(x => x.name);
  console.log(JSON.stringify(views));  // ALWAYS SHOWS ["TabsPage"], not the actual page (eg: "DetailsPage")

  let activePortal = this.ionicApp._loadingPortal.getActive() || 
    this.ionicApp._modalPortal.getActive() || 
    this.ionicApp._overlayPortal.getActive();

  if (activePortal) {
    activePortal.dismiss();
  }
  else if(this.nav.canGoBack()) {
    this.nav.pop();
  } else {
    if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
        this.platform.exitApp(); //Exit from app
    } else {
      this.alerts.showToast("Press back button again to exit");
      this.lastTimeBackPress = new Date().getTime();
    }
  }
}

Answer 1

You will not get the name of the page.

registerBackButtonAction does not return the name of the page, it returns the instance. Therefore, if you want to find the page, you will have to instantiate an instance of the page in app.component.ts & then compare it with the value returned.

I would also recommend not using code relying on Page names since the names will be lost in a production build. When the code is minified in a production build, names are minified too so for example, the name HomePage will become a. This will cause your code to break in production.