Bug in jumping between tabs page?


I have a TabsPage with 4 individual tab pages inside.
In “Feedback” tab page, I want to jump to “Home” tab page when a submit (send!) button is clicked.

This is the feedback page content

After clicking “Send!” (submit) button, the screen displays homepage content while tab highlight is wrong in “Feedback” - screenshot below
Only by clicking twice the “Feedback” tab on the bottom, the screen will display content correctly.

Did I make anything wrong in the code?

TabsPage html file

<ion-tabs [selectedIndex]="tabIndex">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Timeline" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Feedback" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="My" tabIcon="settings"></ion-tab>

TabsPage ts file

  tabIndex: number = 0;

  constructor(public navParams: NavParams, public utilProvider: UtilProvider) {
    this.tabIndex = navParams.get("openTab") || 0;

Feedback page ts file

submit() {
 this.navCtrl.setRoot("TabsPage", {
            openTab: 0

You should look at document(https://ionicframework.com/docs/api/components/tabs/Tabs/)
The correct sample code is introduced in the document.

Though I think I followed there, I will take a more close look.

Would you mind to tell anything wrong that you see from my code?

As a point to think about at once.

  1. constructor is not ionic lifecycle.
  2. document not suggest binding method. use @ViewChild('myTabs') tabRef: Tabs;.
  3. if control tab page, you can use this.navCtrl.parent.select(2);.

Document tell you correct writing style.

1 Like

Add a console.log before this line when (and how often) this is actually executed.

I eventually used this.navCtrl.parent.select(0), it works!

this.navCtrl.setRoot does call the constructor on the TabsPage as I tested, but the bug persists
@ViewChild('myTabs') tabRef: Tabs cause the app freezes at a blank page in launching

1 Like