Passing navparams in tabs.ts then sending them to modals

Ionic Framework ionic-v3
1

I have a problem. My app has facebook authentication and i am passing the parameters to all tab pages like this:

tabs.ts

homeParams={
    facebooknev: this.navParams.get('nev'),
    facebookemail: this.navParams.get('email'),
    facebookprofilkep: this.navParams.get('profilkep')

  }

tabs.html

<ion-tab [root]="tab1Root" tabTitle="Hírek" tabIcon="home" [rootParams]="homeParams"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tudásbázis" tabIcon="information-circle" [rootParams]="homeParams"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Halszámláló" tabIcon="contacts" [rootParams]="homeParams"></ion-tab>

However when i am on the second tab page i am trying to open a modal page and send the parameters to that page(which is not a tabpage):

  openFeltoltes(){
    const feltolt=this.modal.create(FogasfeltoltesPage,{data:this.homeParams});
    feltolt.present();
  }

Unfortunately cannot find homeParams with that code

welcome.ts (where i get the facebook parameters from login):

  let facebookadatok={
              nev: res.user.displayName,
              email: res.user.email,
              profilkep: res.user.photoURL
            }
            this.navCtrl.push(TabsPage,facebookadatok);

i can display data on any html pages which is part of the tabpage, but not on individual pages:

{{navParams.data.facebooknev}}

2

You are setting the params on the tabs.ts as rootParams, but you still need to unwrap the data object on your second tab like this:

constructor(navParams: NavParams) {
    console.log('Passed params', navParams.data);
  }

Then store that value inside the controller and use it once you need to pass it to the modal later!

You can also find the example on the Tabs documentation.

1 Like