Navigate to Page in specific Tab

Ionic Framework ionic-v3
21

Well the example from @adibbz worked perfect for me and without the need to use this.app.getRootNav() which I believe was bugguing @rapropos . Below is the code from the component that calls the tabs

// InappPage is my internal tabs page
loginForm() {
    //console.log(this.login.value);
    this.navCtrl.setRoot(InappPage, {tabIndex: 2});
  }

ionic -v
3.20.0
22

Can i pass parameters with this method?:
this.app.getRootNav().getActiveChildNav().select(3);

i tried:

this.app.getRootNav().getActiveChildNav().select(3, {apto: 1});

but it didnt work.

23

Has anyone found a solution? This is really frustrating. With ionic-v1 that was no problem at all.

24 
const tabs = this.navCtrl.parent;
tabs.select(1)
  .then(() => tabs.getSelected().push(NewPostPage))
  .then(() => this.navCtrl.popToRoot());
1 Like
25

Guys have found the simple solution so thought to share with you may it will help some one.

import { NavController, Nav , Tabs } from ‘ionic-angular’;

constructor(public navCtrl: NavController, private nav: Nav) {
this.tab = this.navCtrl.parent;
}

goToTab3 (){
this.tab.select(2);
}

reply if any one facing issues.

also i have tried all the solution which is give in above comments but found few issues/difficulty

26

For me the following code worked:

this.navCtrl.parent.select(0);

I have a tabbed layout with 4 tabs. I used this to redirect to the first tab after logout.
Reference: Ionic official doc for tab - https://ionicframework.com/docs/api/components/tabs/Tabs

Thanks!

1 Like
27

<ion-tabs selectedIndex=“1” #myTabs>

<ion-tab [root]=“tab1Root” tabTitle=“A” tabIcon=“ios-medical-outline”></ion-tab>

<ion-tab [root]=“tab2Root” tabTitle=“B” tabIcon=“search”></ion-tab>

<ion-tab [root]=“tab3Root” tabTitle=“C” tabIcon=“ios-settings-outline”></ion-tab>

</ion-tabs>

default selected tab is tab "B"

below what I want to do:

When I’m on tab “A” or tab “C” when I click on hardware back button it should redirect to tab “B” then if i again press hardware back button app should exist.

Please suggest me how I’ll do it??

Thanks in advance

28

hi!
sorry it’s not about the subject but please can i know which tool dis you use to make the mockups?

tab-example.png1458×922 34.2 KB

29

Hey @okobsamoht – I’m pretty sure I just used Sketch.

31

CARA essa é a solução perfeita!! :clap::clap::clap::clap:
Man, this is the perfect solution !! :clap::clap::clap::clap:

32

Thank You, It’s Worked.

33

you can try the following if you page child page use tabs.select(0) if not and there is no back button use this.navCtrl.setRoot(HomePage) or you can use as i used .

const tabs = this.navCtrl.parent;
tabs != null ? tabs.select(0) : this.navCtrl.setRoot(HomePage);

34

thanks,it’s working :grinning: :grinning: