Ionic 2 将选项卡 NavParams 传递到选项卡 [英] Ionic 2 passing tabs NavParams to tab

问题描述

我开始使用 Ionic 2 创建我的第一个应用程序，经过大量的试验和错误，已经到了谷歌搜索无法找到任何帮助的地步.

I'm starting out on creating my first app using Ionic 2 and through a lot of trial and error have got to a point where no number of Google searching can find anything to help.

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

I'm trying to pass some NavParams to a tab. The NavParams are available in the parent tabs page:

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

But I cannot seem to get the NavParams within a tab itself:

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

我只是不完全确定如何将选项卡页面中的参数传递给选项卡本身，或者以某种方式从选项卡父级请求参数.我假设是这样的:

I'm just not entirely sure how to pass the params from the tabs page to the tab itself or somehow request a param from the tab parent. I assume something like:

this.tab1Root = Tab1(this.params);

任何帮助将不胜感激！

推荐答案

这个问题已经有几个星期了，所以您可能已经找到了答案.此功能于 2 月添加:https://github.com/driftyco/ionic/issues/5475.

This question is a few weeks old so you may have already found the answer. This feature was added in February: https://github.com/driftyco/ionic/issues/5475.

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

Taking the code from your original tab page, let's say a parameter is passed to the "parent" tab page and we want to store it in a property called fooId (this could be an object, or just a simple integer or string value, whatever):

@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 在 文档在这里):

Then in your tabs.html, you can reference it like this using the rootParams attribute (rootParams is referenced in the documenation here):

<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 传递的值将在那里.

Then in your Tab1 page, you can reference your NavParams just like any other page and the value passed for foodId will be there.

这篇关于Ionic 2 将选项卡 NavParams 传递到选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！