Ionic 2将选项卡NavParams传递给选项卡

Question

我开始使用Ionic 2创建我的第一个应用程序,并通过大量的试验和错误已达到一个点,没有数量的谷歌搜索可以找到任何帮助.

我正在尝试将一些NavParams传递给选项卡.NavParams在父标签页中可用:

@Page({
    templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor(params: NavParams) {

      this.params = params;
      console.log(this.params); // returns NavParams {data: Object}

      // this tells the tabs component which Pages should be each tab's root Page
      this.tab1Root = Tab1;
      this.tab2Root = Tab2;
      this.tab3Root = Tab3;
    }
}

但我似乎无法在选项卡本身中获取NavParams:

@Page({
    templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
    constructor(nav: NavController, params: NavParams, platform: Platform) {
        this.nav = nav;
        this.params = params;
        this.platform = platform;

        console.log(this.params); // returns NavParams {data: null}
    }
}

我只是不完全确定如何将标签页面中的参数传递给标签本身,或以某种方式从标签父级请求参数.我假设像:

this.tab1Root = Tab1(this.params);

任何帮助将不胜感激!

Answer 1

这个问题已经有几个星期了,所以你可能已经找到了答案.这个功能在二月份添加:https://github.com/driftyco/ionic/issues/5475.

从原始标签页获取代码,假设参数被传递到"父"标签页,我们希望将其存储在一个名为的属性中fooId(这可能是一个对象,或者只是一个简单的整数或字符串值,无论如何) :

@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;
    }
}

然后在你的tabs.html中,你可以使用rootParams属性这样引用它(rootParams在这里的文档中引用):

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

然后在Tab1页面中,您可以像任何其他页面一样引用您的NavParams,并且传递的值foodId将在那里.

Answer 2

对于那些还没有想通的人.....

我搜索了很多,我得到的唯一答案是使用本机存储或使用服务或会话存储 ......但这不是我想要的......所以,如果你在Tabs.ts页面的NavParams中有数据并希望它以[rootParam]的形式传递给相应的选项卡 ...那么您需要做的是将您的NavParams分配给 Tabs.ts页面中的变量而不是将其直接绑定到 HTML中的[rootParams]页.喜欢 ..

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>

要么

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 3

在我知道的Tab-Pages中没有直接传递Params的方法.

我认为您可以使用NavController来使其工作.

一个简洁的解决方法是将参数放入注入的服务: app/services/params.js:

import {Injectable} from 'angular2/core';

@Injectable()
export class Params{
    constructor(){
        console.log("Params()");  
        this.params={};
    }
}

并在控制器中:

    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"};

别忘了在@App中注入服务