IONIC4 - get params from parent route

Ionic Framework
1

Hi,

I’m using ionic 4 RC.0.

I’m using tabs for my view, where I have a master page that include 3 tabs. the routing is like this

merchant-home >> merchant ID

  • tab 1
  • tab 2
  • tab 3

in the app-routing.module.ts I have this:

{ path: 'merchant-home/:id', loadChildren: './merchant-home/merchant-home.module#MerchantHomePageModule' },

in the merchant-home route I have this:

const routes: Routes = [
  {
    path: '',
    component: MerchantHomePage,
    children: [
      {
        path: `merchant-all`,
        // data: { i: 1, id: 456},
        children: [
          {
            path: '',
            loadChildren: '../merchant-all/merchant-all.module#MerchantAllPageModule'
          }
        ]
      },
      {
        path: 'merchant-discount',
        children: [
          {
            path: '',
            loadChildren: '../merchant-discount/merchant-discount.module#MerchantDiscountPageModule'
          }
        ]
      },
      {
        path: 'merchant-oneday',
        children: [
          {
            path: '',
            loadChildren: '../merchant-oneday/merchant-oneday.module#MerchantOnedayPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/merchant-home/:id/merchant-all',
        pathMatch: 'full'
      }
    ]
  }
];

in merchant-home.page.ts i can get the id using :slight_smile:

this.route.snapshot.paramMap.get('id');

but on the tabs, i tried all tricks to get the ID without any luck!

console.log('the id', this.route.snapshot.paramMap.get('id')); 

this.route.params.subscribe(params => {

        const parentRouteId = +params['id'];
        console.log('parent params ', parentRouteId);
        console.log('parent params ', params);
    });

this.route.parent.data.subscribe((data) => console.log('para', data));

this.route.parent.snapshot.paramMap.get( 'id' )

 this.route.parent.paramMap.subscribe(
      ( params: ParamMap ): void => {

        console.log('the params', params);
      });


this.route.parent.params.subscribe(params => {

        console.log(params );
        // do something with local "params"
      });

 this.route.parent.params.subscribe(params => console.log(params)); 

      this.route.parent.queryParamMap.subscribe(params => console.log(params));

      console.log('the id', this.route.snapshot.parent.paramMap.get('id'));
      console.log('the id', this.route.parent.snapshot.paramMap.get('id'));

I just want to pass data to the tabs! I know navParams is not working anymore, and I don’t know what to use to pass the data!

the tabs setup is:

  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="merchant-all" [rootParams]="merchantID">
        <ion-label>All {{merchantID}} </ion-label>
        <!-- <ion-icon name="star"></ion-icon> -->
      </ion-tab-button>

      <ion-tab-button tab="merchant-discount">
        <ion-label>Discount</ion-label>
        <!-- <ion-icon name="globe"></ion-icon> -->
      </ion-tab-button>

      <ion-tab-button tab="merchant-oneday">
        <ion-label>One Day</ion-label>
        <!-- <ion-icon name="logo-facebook"></ion-icon> -->
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
2

I changed the tabs routing to:

const routes: Routes = [
  {
    path: '',
    component: MerchantHomePage,
    children: [
      {
        path: `merchant-all`,
        loadChildren: '../merchant-all/merchant-all.module#MerchantAllPageModule'
        // data: { i: 1, id: 456},
       /*  children: [
          {
            path: '',
            loadChildren: '../merchant-all/merchant-all.module#MerchantAllPageModule'
          }
        ] */
      },
      {
        path: 'merchant-discount',
        loadChildren: '../merchant-discount/merchant-discount.module#MerchantDiscountPageModule'
        /* children: [
          {
            path: '',
            loadChildren: '../merchant-discount/merchant-discount.module#MerchantDiscountPageModule'
          }
        ] */
      },
      {
        path: 'merchant-oneday',
        loadChildren: '../merchant-oneday/merchant-oneday.module#MerchantOnedayPageModule'
        /* children: [
          {
            path: '',
            loadChildren: '../merchant-oneday/merchant-oneday.module#MerchantOnedayPageModule'
          }
        ] */
      },
      {
        path: '',
        redirectTo: '/merchant-home/:id/merchant-all',
        pathMatch: 'full'
      }
    ]
  }
];

and I used this in each tab page to get the id and it worked!

console.log('the id in ALL', this.route.parent.snapshot.parent.paramMap.get('id'));

but it is not a good practice to query my database ‘firestore’ in each tab! I really hope that anyone can help me in passing the data array or object from tabs page to each tab.

2 Likes
3

Estoy intentando lograr añadir esta solucion, sin embargo me sigue saliendo esto:
image

Este seria mi tab donde lo podria recuperar el valor: ID
image

Estas son mis rutas
image