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

Posted 2023-03-16

【中文标题】Ionic 2 将选项卡 NavParams 传递到选项卡

【英文标题】：Ionic 2 passing tabs NavParams to tab

【发布时间】：2016-05-11 18:42:59

【问题描述】：

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

任何帮助将不胜感激！

【参考方案1】：

这个问题是几周前的问题，所以您可能已经找到了答案。此功能于 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 属性像这样引用它（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 传递的值将在那里。

【讨论】：

这仅在加载页面时触发构造函数时有效。从事件更新它时它不起作用。

我创建了一个问题***.com/questions/40354553/…

【参考方案2】：

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

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

【参考方案3】：

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

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

【讨论】：

这可行，但我需要更新参数。当一个页面更新数据时，根页面正在监听变化，它需要更新这个。

我创建了一个问题***.com/questions/40354553/…

很简洁，适用于任何 ion-nav，不仅仅是这个标签盒

【参考方案4】：

我尝试了很多方法，但没有一个对我有帮助。由于我的应用程序不涉及太多复杂性，因此我使用离子原生存储plugin 实现了它。如果触发新标签页，我会在原生存储中存储一些变量（sn-p如下）。

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

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

【参考方案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: "[e-mail]",
    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) 
  

【讨论】：

请不要只回答源代码，而是解释你的解决方案！