Question

这与SO问题Ionic 2 passing tabs NavParams to tab

密切相关

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

 <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>
....

并且在类的构造函数中（主要标签页）我正在设置 rootParams 。

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

当我在Tab中的子页面上获得 ionViewDidEnter（）生命周期事件中的值时，这样可以正常工作。

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

当我通过收听如下事件更新主标签页中的 rootParams 时，

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

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

此事件正在触发，数据正在更新。当该子页面的ionViewDidEnter（）再次被触发时，它仍会从navParams加载旧数据。

更多关于此事。

我这样做的原因是多页共享数据。但它们都需要一致的数据，只有一个视图更新它。首次加载时，主标签页面可能已经有来自其他服务的现有数据。

更新此

虽然我仍然想要一个解决方案，但我选择the answer in the link above。

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

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

 @Injectable()
 export class ParamService {

  public paramsData: any;

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

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

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

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

Ionic 2更新[rootParams]标签

0 个答案: