ionic 4 tabbar - how to always show tab root instead tab sub-pages

3
votes

I currently have a sub-route in a tab:

/mytab
/mytab/subpage

So when I'm in the sub-page, click another tab and come back, I'll see the sub-page where I was before (default behavior).

I want to make it always show root page (not sub-page) when I click the tab button.

I tried changing button params tab='mytab' to href='/mytab' -- it worked but causes page refresh every time it clicks.

<ion-tab-button href="/tabs/mytab">
  <ion-icon name="ios-list"></ion-icon>
  <ion-label>mytab</ion-label>
</ion-tab-button>

Is there any other way to reach that?

1
angularionic-framework

1 Answers

3
votes

Every time the tab is changed I navigate to its root page.

In my .html:

<ion-tabs #myTabs (ionTabsDidChange)="tabChanged()">
  <ion-tab-bar>
    // Your tab buttons
  </ion-tab-bar>
</ion-tabs>

In my .ts

import {NavController, IonTabs } from '@ionic/angular';

@ViewChild('myTabs', {static: false}) myTabs: IonTabs;

constructor(private navCtrl: NavController) {}

tabChanged() {
  var currentTab: string = this.myTabs.getSelected();
  this.navCtrl.navigateRoot('tabs/' + currentTab);
}