Change Ionic Tabs to navigate to their root page and not to their last page

6
votes

I am using the Ionic Tab Navigation

<ion-tabs #mainTabs>
  <ion-tab [root]="tab1" tabTitle="Page1" tabIcon="icon-tasks"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Page2" tabIcon="icon-calendar"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Page3" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

And everything works okay with the exception that when I click on a tab it goes to the last visited page on that stack and not the root page of the stack.

For example:

Page1
  Subpage1 (root)
  Subpage2
  Subpage3 <-- Last visited page
Page2
Page3

If I am on the last visited page (Subpage3) then I touch on tab Page3 and then I touch on tab for Page1 it goes back to Subpage3 but I want it to go to Subpage1 which is root.

Thanks for your help!

5
angulartypescriptionic-frameworkionic2ionic3

5 Answers

1
votes

This is by design.In other words, Each individual ion-tab is a declarative component for a NavController.So if you push something to that tab's NavController, it remains there when you'll come back again to that Tab.We cannot do anything for that.

NavController is the base class for navigation controller components like Nav and Tab. You use navigation controllers to navigate to pages in your app. At a basic level, a navigation controller is an array of pages representing a particular history (of a Tab for example). This array can be manipulated to navigate throughout an app by pushing and popping pages or inserting and removing them at arbitrary locations in history.

Please see the Doc for more info.

10
votes

Like Sampath comments this is by design. The only way i found is to force it by a ion-tab change event:

tabChanged($ev) {
  $ev.setRoot($ev.root);
}

<ion-tabs #mainTabs (ionChange)="tabChanged($event)">
  <ion-tab [root]="tab1" tabTitle="Page1" tabIcon="icon-tasks"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Page2" tabIcon="icon-calendar"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Page3" tabIcon="icon-profile"></ion-tab>
</ion-tabs>
0
votes

So i did this to fix in latest angular and ionic

 <ion-tab-button (click)="appointments()" tab="appointments">

And our appointments() function in ts is:

appointments(): void {                  
  this.router.navigate(['/customer/appointments']);
}

Pretty simple, we just route on our needed page, and no this weird last page opened.

-1
votes

Use this.navCtrl.popToRoot() function on every subpage. You can find more about it here. https://ionicframework.com/docs/api/navigation/NavController/

-3
votes

Try this:

this.navCtrl.goBack();//for ionic 4
this.navCtrl.pop(); //ionic 3

As pop or goback would pop out the last visted page out of the stack