2

Esoy utilizando los tabs en Ionic 2 pero no consigo pasar parametros entre ellos.

Actualmente lo que estoy intentando es importar en una de las tabs la clase que contiene las tabs e intentar acceder a un método de esa clase que me devuelve los valores.

Tabs.ts

import { Component } from '@angular/core';
import { NavParams, NavController } from 'ionic-angular';

import { ConfigPage } from '../config-page/config-page';
import { IndexPage } from '../index-page/index-page';
import { ProfilePage } from '../profile-page/profile-page';
import { Welcome } from '../welcome/welcome';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  public datosTienda: any;
  tab1Root: any = ConfigPage;
  tab2Root: any = IndexPage;
  tab3Root: any = ProfilePage;

  constructor(
    private navParams: NavParams,
    private navController: NavController
  ) {}

  ngOnInit(){
    this.datosTienda = this.navParams.get('datosTienda');
  }

  getDatos(): any{
    if(this.datosTienda != undefined) {
      return this.datosTienda;
    }
  }
}

Desde welcome.ts vienen los datosTienda, que se los paso mediante el navController.push y los recibo sin problema.

Index-page.ts:

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { TabsPage } from '../tabs/tabs';

@Component({
    templateUrl: 'index-page.html',
})
export class IndexPage {

    public datosTienda: any;
    constructor(
        public navParams: NavParams,
        public tabsIns: TabsPage,
    ){ }
    ngOnInit(){
        this.datosTienda = this.tabsIns.getDatos();
        console.log(this.datosTienda);

    }
}

El error que me está dando es:

Can't resolve all parameters for IndexPage: ([object Object], ?)

¿Alguna idea?

1 respuesta 1

2

Me autosoluciono la pregunta jeje.

Para pasar datos entre tabs tenemos primero que modificar la vista de nuestro tabs.html

Añadiremos [rootParams]="parametros"

<ion-tabs selectedIndex="1" tabsPlacement="top" mode="md">
  <ion-tab [root]="tab1Root" [rootParams]="datosTienda" tabTitle="Config" tabIcon="build"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="datosTienda" tabTitle="Index" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" [rootParams]="datosTienda" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>

Posteriormente en el controlador de donde queramos recibir dichos parametros. Por ejemplo el index.ts lo dejaremos así:

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { TabsPage } from '../tabs/tabs';

@Component({
    templateUrl: 'index-page.html',
})
export class IndexPage {

    public datosTienda: any;
    constructor(
        public navParams: NavParams
    ){
        this.datosTienda = navParams.data;
     }
    ngOnInit(){

    }
}

Y listo ahora en datosTienda tendremos los parametros que hemos pasado desde tabs.

2
  • 1
    Me alegra que puedieras solucionarlo. En 48h podrás aceptar tu propia respuesta. Un saludo
    – lois6b
    el 30 mar. 2017 a las 8:22
  • 1
    Si si, lo tengo en cuenta. Mañana la aceptaré para que quede cerrado el asunto y pueda servir de ayuda en el futuro. Muchas gracias.
    – Findelias
    el 30 mar. 2017 a las 8:24

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.