Using rootParams in TabsPage

Ionic Framework ionic-v3
1

Hi all… need some help !!!
I am still confuse how to pass rootParams to TabsPage…
my flow are like this…
When user login and success -> get user data -> go to user Tab Page ( there are 3 user Tab page ) and I don’t want any back navigation because all tab page have side menu.
I am able to get params data from Tab Parent but get null data in Tab child page.
Already saw @adam commit about feat (tabs) pass params to tabs but it’s hard for me to understand how to use it because i am still learning.

my login.js

doLogin() {
      this.userService.userLogin(this.email, this.password)
          .subscribe( 
                 data => {
                         this.user = data;
                         console.log('Account Login with Success', this.user);
                         this.nav.setRoot(UserPage, this.user);                       
                         },
                 error =>  this.errorMessage = <any>error);
} // end of doLogin()

my tab.js

export class UserPage {
  constructor(private params: NavParams) {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = UserProfilePage;
    this.tab1Params = params;
    this.tab2Root = UserFriendPage;
    this.tab3Root = UserActivityPage;
    console.log('params from login', this.tab1Params);  // has data
  }

my tab.html

`<ion-tabs>
  <ion-tab [root]="tab1Root" [rootParams]="tab1Params" tabTitle="Profile" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Friends" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Activity" tabIcon="stats"></ion-tab>
</ion-tabs>`

my tab1Root.js

` export class UserProfilePage {
        
        constructor(params: NavParams){
            this.tab1Params = params;
            console.log('params from UserProfilePage', this.tab1Params); // there is no data
        }
    }`

Thanks in advance for ur kindly help.

2

Any Help @brandyshea ?

Hi @aaronksaunders , i learn from your sample kinvey-starter-ionic2 but i can’t find any sample how to pass params from login page to tabs page. Could you help me from above problem ???

Thanks in advance for ur kindly help.

3

i will take a look tonight… you got a project somewhere?

4
5

Thanks @aaronksaunders for ur kindly help.

I’m a beginner and still far away from a project, need to learn more first.
After that create an apps, maybe with anybody that interested to collaborate.
Now, i try to work around with ur sample above.
Will soon find u for another help. :slight_smile:
Thanks.

6

Did you fixed your problem ? Cause I have the same and I need help too

7

i had the same issue. fixed it.

use rootParams as part of the tabs declaration and within the root page ( which is tab is going to render ) you have to define the object and reassign with navParams.

Happy coding!

8

Can you share your code, please. It will be useful for me :slight_smile:

9

team-detail.html

<ion-tabs>
  <ion-tab tabTitle="Members" tabIcon="people" [root]="teamPage" [rootParams]="team">Team</ion-tab>
  <ion-tab tabTitle="Standings" tabIcon="stats" [root]="standingPage" [rootParams]="team">Standings</ion-tab>
  <ion-tab tabTitle="Photos" tabIcon="photos" [root]="photoPage" [rootParams]="team">Photos</ion-tab>
</ion-tabs>

team-detail.ts

export class TeamDetail {
  team: any;
  teamPage = Teams;
  standingPage = Standings;
  photoPage = Photos;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.team = navParams.data;
  }
}

teams.ts

export class Teams {
  team: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.team = navParams.data;
  }
}

teams.html

<ion-content padding>
  <h2>Members of {{team.name}}</h2>
1 Like
10

I see now. It’s perfect.
Thanks @sampathaya

1 Like
11

I am getting
Error: Uncaught (in promise): TypeError: Cannot set property ‘rootNavCtrl’ of undefined