Bug in jumping between tabs page?

Ionic Framework ionic-v3
1

Hi,

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

IMG_0532
IMG_0532.PNG750×1334 27.4 KB

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.

IMG_0531
IMG_0531.PNG360×640 154 KB

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>
</ion-tabs>

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
          });
}
2

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

3

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?

4

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.
regard.

1 Like
5

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

6

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