Question

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

我正在尝试将一些NavParams传递给选项卡。 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}
    }
}

但我似乎无法在标签本身中获取NavParams：

this.tab1Root = Tab1(this.params);

我只是不完全确定如何将制表符页面中的参数传递给制表符本身，或以某种方式从制表符父级请求参数。我假设像：

value: 1000, inc: 123, pace: 1000, auto: true

非常感谢任何帮助！

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属性（documenation here中引用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]的身份传递到相应的标签 ... 那么你需要做的是而不是在Tabs.ts页面中将NavParams分配给变量你可以做的是将它直接绑定到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 来使其正常工作。

一个简洁的解决方法是将参数放入注入的服务： 应用程序/服务/ 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

中注入服务

Answer 4

我试过很多方法，但没有一个对我有帮助。由于我的应用程序没有太多复杂性，我使用离子本机存储plugin实现了它。如果触发新标签页，我会将一些变量存储在本机存储中（代码段如下）。

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

在下一个标签页的构造函数或ionviewdidload页面中，我将检查此变量并执行所需的actions.Snippet如下所示。

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

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

Answer 5

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) {
  }

}

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

5 个答案: