Ionic 2 将标签 NavParams 传递给标签

Question

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

我正在尝试将一些 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

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

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

Answer 2

这个问题是几周前提出的，所以您可能已经找到了答案。此功能于 2 月添加：https://github.com/driftyco/ionic/issues/5475.

从您的原始标签页中获取代码，假设一个参数被传递到 "parent" 标签页，我们想将它存储在一个名为 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 3

我尝试了很多方法，但其中 none 对我有帮助。由于我的应用程序不涉及太多复杂性，因此我使用离子本机存储 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)
  );

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

Answer 4

对于那些还没有弄明白的人.....

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

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 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 传递给标签

Ionic 2 passing tabs NavParams to tab

ionic-framework

ionic2