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

问题描述

我开始使用Ionic 2创建我的第一个应用程序，并且通过大量的试验和错误已达到一定程度，Google搜索无法找到任何帮助。

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

任何帮助都将不胜感激！

Any help would be greatly appreciated!

推荐答案

这个问题已经有几周了，所以你可能已经找到了答案。此功能于二月份添加： 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屋！