Ionic 2 passing tabs NavParams to tab

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

Answer 1

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 2

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 3

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) {
  }

}

Answer 4

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 5

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.