42

我开始使用 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);

任何帮助将不胜感激！

4

5 回答 5

66

这个问题已经有几个星期了，所以你可能已经找到了答案。此功能于 2 月添加：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将在那里。

于 2016-03-30T19:43:02.087 回答
12

对于那些还没有弄清楚的人......

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

选项卡.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);
}
于 2017-07-16T02:37:48.150 回答
7

据我所知，没有直接的方法可以在标签页中传递参数。

我认为您可以使用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 中注入服务

于 2016-02-03T12:02:53.523 回答
1

tabs.html - 添加[rootParams]="paramName"; 到您要将数据传递到的选项卡

<ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2Root"></ion-tab>
    <ion-tab tabTitle="Tab3" [root]="tab3Root"></ion-tab>
</ion-tabs>

tabs.ts - 设置键和数据

export class TabsPage {
  this.tab1Root = Tab1;
  this.tab2Root = Tab2;
  this.tab3Root = Tab3;

  fooId: {
    firstName: "lawlesscreation",
    email: "user@email.com",
    score: number // can also set it later in the constructor
  }

  constructor() {
    let score = getScore(); //some method to get score
    this.fooId.score = score;
  }
}

tab1 页面 - 导入NavParams并使用this.navParams.get(key)获取数据

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class Tab1 {
  firstName = this.navParams.get('firstName');
  score = this.navParams.get('score');
  userEmail = this.navParams.get('email');

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}
于 2018-02-04T13:31:15.233 回答
1

我尝试了很多方法，但没有一个对我有帮助。由于我的应用程序不涉及太多复杂性，因此我使用 ionic native storage plugin实现了它。如果触发新标签页，我会将一些变量存储在本机存储中（片段如下）。

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

在下一个标签页的构造函数或 ionviewdidload 页面中，我将检查此变量并执行所需的操作。片段如下。

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

注意：这仅适用于小型应用程序或需要传递有限变量集的情况。如果有很多变量，它可能会在应用程序缓存中占用更多空间，这可能会降低应用程序的性能。

于 2017-06-05T05:49:03.090 回答