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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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