Ionic 2更新[rootParams]标签

Muk*_*kus 5 tabs nav ionic2

这与SO问题Ionic 2将选项卡NavParams传递给选项卡密切相关

我有标签视图模板设置为:

 <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>
....
Run Code Online (Sandbox Code Playgroud)

并在类的构造函数(主Tabs页面)中我设置rootParams.

this.paramsData = {
    settings: this.userSettings,
    facilities: this.facilities,              
 };
Run Code Online (Sandbox Code Playgroud)

当我在Tab中的子页面上获取ionViewDidEnter()生命周期事件中的值时,这样可以正常工作.

this.facilities = this.navParams.data.facilities;
let userSettings =  this.navParams.data.userSettings;
Run Code Online (Sandbox Code Playgroud)

当我通过监听下面的事件更新主标签页面中的rootParams时,

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

子页面仍会加载陈旧数据.

此事件正在触发,数据正在更新.当该子页面的ionViewDidEnter()再次被触发时,它仍会从navParams加载旧数据.

对此更多一点.

我这样做的原因是多页共享数据.但它们都需要一致的数据,只有一个视图更新它.在第一次加载时,主选项卡页面可能已经有来自其他服务的现有数据.

更新此事

虽然我仍然想要一个解决方案,但我在上面的链接中找到了答案.

所以我最终创建了如下的服务.

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

 @Injectable()
 export class ParamService {

  public paramsData: any;

  constructor(){
    this.paramsData = {};
  }
}
Run Code Online (Sandbox Code Playgroud)

显然,添加到AppModule类中的提供程序数组中.然后使用它与使用NavParams的方式类似,除了注入ParamService.

this.facilities = this.paramService.paramsData.facilities;
this.userSettings =  this.paramService.paramsData.userSettings;
Run Code Online (Sandbox Code Playgroud)

这仍然可以通过为paramsData 指定接口而不是类型any来改进,因为可以有不同的参数集传递给其他页面/组件.