Ionic 2 passing tabs NavParams to tab - ionic-framework

Question

I'm starting out on creating my first app using Ionic 2 and through a lot of trial and error have got to a point where no number of Google searching can find anything to help.
I'm trying to pass some NavParams to a tab. The NavParams are available in the parent tabs page:
#Page({
templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
}
}
But I cannot seem to get the NavParams within a tab itself:
#Page({
templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
constructor(nav: NavController, params: NavParams, platform: Platform) {
this.nav = nav;
this.params = params;
this.platform = platform;
console.log(this.params); // returns NavParams {data: null}
}
}
I'm just not entirely sure how to pass the params from the tabs page to the tab itself or somehow request a param from the tab parent. I assume something like:
this.tab1Root = Tab1(this.params);
Any help would be greatly appreciated!

Answer 1

This question is a few weeks old so you may have already found the answer. This feature was added in February: https://github.com/driftyco/ionic/issues/5475.
Taking the code from your original tab page, let's say a parameter is passed to the "parent" tab page and we want to store it in a property called fooId (this could be an object, or just a simple integer or string value, whatever):
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
this.fooId = this.params.data;
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
}
}
Then in your tabs.html, you can reference it like this using the rootParams attribute (rootParams is referenced in the documenation here):
<ion-tabs>
<ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab>
</ion-tabs>
Then in your Tab1 page, you can reference your NavParams just like any other page and the value passed for foodId will be there.

Answer 2

For those who haven't figured out yet .....
I've searched a lot and the only answer I got was using native storage or using a service or session storage...but that wasn't what I wanted ...
So, If you have data in NavParams in Tabs.ts page and want to it pass as [rootParam] to respective Tabs...
then what you need to do is instead of assigning NavParams to a variable in Tabs.ts page what you can do is bind it directly to the [rootParams] in the HTML page.
Like ..
tabs.ts
constructor(public navParams: NavParams) { }
tabs.html
<ion-tab [root]="tab1Root" [rootParams]="navParams.get('single')" tabTitle="Customer"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="navParams.get('second')" tabTitle="Map"></ion-tab>
Or
tabs.html
<ion-tab [root]="tab1Root" [rootParams]="navParams.data" tabTitle="Customer"></ion-tab>
tab1.ts
constructor( public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad tab1Page');
console.log(this.navParams.data);
}

Answer 3

There is no direct way to pass Params in Tab-Pages that I know of.
I think you could play around with the NavController to make it work.
A neat workaround is to put the parameter into an injected service:
app/services/params.js:
import {Injectable} from 'angular2/core';
#Injectable()
export class Params{
constructor(){
console.log("Params()");
this.params={};
}
}
and in the controller:
import {Params} from '../../services/params'
#Page({
templateUrl: 'build/pages/home/home.html',
})
export class XYPage{
constructor(nav: NavController,platform: Platform, params: Params) {
console.log("XYPage()",this);
console.log("XYPage()", params.params);
params.params={id="001"};
dont forget to inject the service in your #App

Answer 4

I tried with many methods but none of them were helpful to me. As my application did not involve much of complexities, I implemented it using ionic native storage plugin. In the event that triggers the new tab page, I will store some variable in native storage(snippet is as below).
this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
.then(
() => console.log('Stored item!'),
error => console.error('Error storing item', error)
);
In the constructor or ionviewdidload page of the next tab page I will check for this variable and perform the required actions.Snippet is as below.
this.nativeStorage.getItem('myitem')
.then(
data => console.log(data),
error => console.error(error)
);
Note: This is suitable only for small application or where there is a requirement of passing limited set of variables. If there are lots of variable, it may take more space in the apps cache which may reduce the app performance.

Answer 5

tabs.html - add [rootParams]="paramName"; to the tab you want to pass data to
<ion-tabs>
<ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab2" [root]="tab2Root"></ion-tab>
<ion-tab tabTitle="Tab3" [root]="tab3Root"></ion-tab>
</ion-tabs>
tabs.ts - set the key and data
export class TabsPage {
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
fooId: {
firstName: "lawlesscreation",
email: "user#email.com",
score: number // can also set it later in the constructor
}
constructor() {
let score = getScore(); //some method to get score
this.fooId.score = score;
}
}
tab1 page - import NavParams and use this.navParams.get(key) to get data
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class Tab1 {
firstName = this.navParams.get('firstName');
score = this.navParams.get('score');
userEmail = this.navParams.get('email');
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}