web-dev-qa-db-fra.com

Ionic 2 onglets de passage NavParams à onglet

Je commence à créer ma première application à l'aide d'Ionic 2 et, après de nombreuses tentatives d'essai et d'erreur, nous sommes parvenus à un point où aucun moteur de recherche Google ne peut trouver rien qui puisse l'aider.

J'essaie de passer certains NavParams à un onglet. Les NavParams sont disponibles dans la page des onglets parents:

@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;
    }
}

Mais je n'arrive pas à obtenir les NavParams dans un onglet lui-même:

@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}
    }
}

Je ne suis tout simplement pas tout à fait sûr de savoir comment passer les paramètres de la page d'onglets à l'onglet lui-même ou demander en quelque sorte un paramètre au parent d'onglet. Je suppose quelque chose comme:

this.tab1Root = Tab1(this.params);

Toute aide serait grandement appréciée!

ionic-frameworkionic2
39
lawlesscreation

Cette question date de quelques semaines et vous avez peut-être déjà trouvé la réponse. Cette fonctionnalité a été ajoutée en février: https://github.com/driftyco/ionic/issues/5475 .

En prenant le code de votre page à onglet d’origine, supposons qu’un paramètre soit passé à la page à onglet "parent" et que nous souhaitons le stocker dans une propriété appelée 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;
    }
}

Ensuite, dans votre tabs.html, vous pouvez le référencer comme ceci en utilisant l'attribut rootParams (rootParams est référencé dans la documentation ici ):

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

Ensuite, dans votre page Tab1, vous pouvez référencer vos NavParams comme toute autre page et la valeur transmise pour foodId sera présente.

62
Steve Michelotti

Il n'y a pas de moyen direct de passer Param dans les Tab-Pages que je connaisse.

Je pense que vous pourriez jouer avec le NavController pour le faire fonctionner.

Une solution de contournement consiste à placer le paramètre dans un service injecté: app/services/params.js: 

import {Injectable} from 'angular2/core';

@Injectable()
export class Params{
    constructor(){
        console.log("Params()");  
        this.params={};
    }
}

et dans le contrôleur:

    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"};

n'oubliez pas d'injecter le service dans votre @App

7
jvoigt

tabs.html - add [rootParams] = "nomParam"; à l'onglet auquel vous souhaitez transmettre des données

<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 - définit la clé et les données 

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

  fooId: {
    firstName: "lawlesscreation",
    email: "[email protected]",
    score: number // can also set it later in the constructor
  }

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

page tab1 - import NavParams et utilisez this.navParams.get (clé) pour obtenir des données

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

}
1
juniortan

J'ai essayé avec de nombreuses méthodes, mais aucune d'entre elles ne m'a été utile. Comme ma demande ne présentait pas beaucoup de complexité, je l’ai implémentée en utilisant le stockage ionique natif plugin . Dans le cas où la nouvelle page à onglet est déclenchée, je vais stocker une variable dans le stockage natif (le fragment est comme ci-dessous).

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

Dans la page constructeur ou ionviewdidload de la page à onglet suivante, je vais vérifier cette variable et effectuer les actions requises. Snippet est comme ci-dessous. 

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

Remarque: Ceci ne convient que pour les petites applications ou lorsqu'il est nécessaire de transmettre un ensemble limité de variables. S'il y a beaucoup de variables, cela peut prendre plus d'espace dans le cache des applications, ce qui peut réduire les performances de l'application.

1
Vasanth