首页 文章

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

提问于
浏览 次
40

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

任何帮助将不胜感激！

ionic-framework ionic2

5 回答

  • 1

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

    回复于
  • 64

    对于那些还没有想通的人.....

    我已经搜索了很多和 only answer I got was using native storage or using a service or session storage ...但那不是我想要的...所以，在Tabs.ts页面中 If you have data in NavParams 并希望它 pass as [rootParam] to respective Tabs ...那么你需要做的是在Tabs中 instead of assigning NavParams to a variable . 您可以在HTML页面中执行 bind it directly to the [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>

    Or

    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);
}
    回复于
  • 7

    在我知道的Tab-Pages中没有直接传递Params的方法 .

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

    回复于
  • 1

    我试过很多方法，但没有一个对我有帮助 . 由于我的应用程序没有太多复杂性，我使用离子本机存储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)
  );

    Note: 这仅适用于小型应用或需要传递有限的变量集 . 如果有大量变量，则应用程序缓存中可能需要更多空间，这可能会降低应用程序性能 .

    回复于
  • 10

    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 - 设置 key and data

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

}
    回复于

相关问题