这与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来改进,因为可以有不同的参数集传递给其他页面/组件.