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

Question

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!

Answer 1

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>