Ionic 2 update [rootParams] Tabs

问题

This is closely related to the SO question Ionic 2 passing tabs NavParams to tab

I have tabs view template setup as:

 <ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home"  tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="My Alerts" [rootParams]="paramsData" tabIcon="warning"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Settings" [rootParams]="paramsData" tabIcon="cog"></ion-tab>
....

and in the constructor of the class (main Tabs page) I am setting rootParams.

this.paramsData = {
    settings: this.userSettings,
    facilities: this.facilities,              
 };

This works fine when I get the value in the ionViewDidEnter() lifecycle event on a child page within the Tab like this.

this.facilities = this.navParams.data.facilities;
let userSettings =  this.navParams.data.userSettings;

When I update rootParams in the main Tabs page by listening on an event like below,

listenToSaveEvents(){
    this.events.subscribe('save-settings', (userSettings) => {
      this.userSettings = userSettings;
      this.paramsData = {
        settings: this.userSettings,
        facilities: this.facilities            
      };    
    });

The child page still loads stale data.

This event is firing and the data is updating. When the ionViewDidEnter() of that child page gets fired again, it still loads the old data from navParams.

A bit more on this.

The reason why I am doing it this way i multiple pages share the data. But they all need consistent data and only one view updates it. On first load, the main Tabs page may already have existing data which it gets from another service.

UPDATE ON THIS

While I still want a solution to this, I went with the answer in the link above.

So I ended up creating a Service like below.

import {Injectable} from '@angular/core';

 @Injectable()
 export class ParamService {

  public paramsData: any;

  constructor(){
    this.paramsData = {};
  }
}

Obviously, added to the array of providers in the AppModule class. And then using it similarly to how I did with NavParams, except injecting ParamService.

this.facilities = this.paramService.paramsData.facilities;
this.userSettings =  this.paramService.paramsData.userSettings;

This can still be improved by specifying an interface instead of type any for paramsData as there can be different sets of parameters to pass to other pages/components.

来源：https://stackoverflow.com/questions/40354553/ionic-2-update-rootparams-tabs

标签

tabs

ionic2

nav