Parameter step undefined in Ionic 2 when there are Tabs

2

Esoy using the tabs in Ionic 2 but I can not pass parameters between them.

Currently, what I'm trying to do is to import the class that contains the tabs into one of the tabs and try to access a method of that class that returns the values.

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

From welcome.ts come the store data, which I pass through the navController.push and I receive it without problem.

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

    }
}

The error you are giving me is:

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

Any ideas?

    
asked by Findelias 29.03.2017 в 15:02
source

1 answer

2

I auto-solve the question hehe.

To pass data between tabs we must first modify the view of our tabs.html

We will add [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>

Later in the controller where we want to receive these parameters. For example the index.ts we will leave it like this:

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

    }
}

And now ready in dataTienda we will have the parameters that we have passed from tabs.

    
answered by 30.03.2017 / 10:20
source