Ionic 4 Tab navigation params

Hello Ionites.

I have the tab root page (CustomerRootTabPage) with 3 tabpages (CustomerDetailTab, CustomerContactsTabPage, CustomerActivitiesTabPage).

Wenn I pass the paramter customerId from StartPage to CustomerRootTabPage, the parameter customerId is accessible only on tab root page, but is not accessible on tabpages.

I need to access this parameter on tabpages. Please help me :frowning:

StartPage:

<ion-card-content [routerLink]="'/customer/' + customer.customerId" routerDirection="forward">

=========================================================================

app.routing.module

const routes: Routes = [
  { path: '', loadChildren: './dashboard/dashboard.module#DashboardPageModule' },
  { path: 'customer/:customerId', loadChildren: './customer-root-tab/customer-root-tab.module#CustomerRootTabPageModule' }}
]

=========================================================================

CustomerRootTabPageRoutingModule.ts

const routes: Routes = [
  {
    path: 'customer',
    component: CustomerRootTabPage, 
    children: [
      {
        path: 'customer-detail-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-detail-tab/customer-detail-tab.module#CustomerDetailTabPageModule'
          }
        ]
      },
      {
        path: 'customer-contacts-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-contacts-tab/customer-contacts-tab.module#CustomerContactsTabPageModule'
          }
        ]
      },
      {
        path: 'customer-activities-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-activities-tab/customer-activities-tab.module#CustomerActivitiesTabPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/customer-detail-tab',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'customer/customer-detail-tab',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class CustomerRootTabPageRoutingModule {}

=========================================================================
With works fine: CustomerRootTabPage.ts

export class CustomerRootTabPage implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}


  ngOnInit() {
    let customerId = this.activatedRoute.snapshot.paramMap.get('customerId');
    console.log("customerId" + customerId); **// customerId is ok**
  }

=========================================================================

With not : CustomerDetailTabPage.ts

ngOnInit() {

    let customerId = this.activatedRoute.snapshot.paramMap.get('customerId');
   console.log("customerId" + customerId); // **customerId null !!!!!**

Thnx

Hi,

the route module :

CustomerRootTabPageRoutingModule.ts

const routes: Routes = [
  {
    path: 'customer',
    component: CustomerRootTabPage, 
    children: [
      {
        path: 'customer-detail-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-detail-tab/customer-detail-tab.module#CustomerDetailTabPageModule'
          }
        ]
      },
      {
        path: 'customer-contacts-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-contacts-tab/customer-contacts-tab.module#CustomerContactsTabPageModule'
          }
        ]
      },
      {
        path: 'customer-activities-tab',
        children: [
          {
            path: '',
            loadChildren: '../customer-tabs/customer-activities-tab/customer-activities-tab.module#CustomerActivitiesTabPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/customer-detail-tab',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'customer/:customerId/customer-detail-tab',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class CustomerRootTabPageRoutingModule {}

in each tab page you can get the id by:

this.route.parent.snapshot.parent.paramMap.get('customerId');
1 Like

The tab component in ionic is so stupid, I really dislike it… and it is one of the reasons I’m planing to migrate all my apps to Flutter!

2 Likes

Thnx, bro :+1::+1::+1::+1::+1::+1::+1::+1::+1::+1::+1::+1:

Hi,
I ran into the same problem, but this solution doesn’t work for me…
But i am sure i am missing something…
Here’s my Code:
app-routing.module.ts:

  { path: 'horse-detail/:id', loadChildren: './pages/horse-detail/horse-detail.module#HorseDetailPageModule' },

horse-detail.router.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HorseDetailPage } from './horse-detail.page';

const routes: Routes = [
  {
    path: 'horse-detail',
    component: HorseDetailPage,
    children: [
      {
        path: 'horse-size',
        children: [
          {
            path: '',
            loadChildren: '../horse-size/horse-size.module#HorseSizePageModule'
          }
        ]
      },
      {
        path: 'horse-food',
        children: [
          {
            path: '',
            loadChildren: '../horse-food/horse-food.module#HorseFoodPageModule'
          }
        ]
      },
      {
        path: 'horse-health',
        children: [
          {
            path: '',
            loadChildren: '../horse-health/horse-health.module#HorseHealthPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/horse-size',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'horse-detail/:id/horse-size',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class HorseDetailPageRoutingModule {}

I’m calling the horse-detail (tabsrootpage) as OP does.

The Errormessage:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot redirect to 'horse-detail/:id/horse-size'. Cannot find ':id'.
Error: Cannot redirect to 'horse-detail/:id/horse-size'. Cannot find ':id'.
    at ApplyRedirects.findPosParam (router.js:3810)
    at router.js:3796
    at Array.map (<anonymous>)
    at ApplyRedirects.createSegments (router.js:3792)
    at ApplyRedirects.createSegmentGroup (router.js:3770)
    at router.js:3779
    at forEach (router.js:813)
    at ApplyRedirects.createSegmentGroup (router.js:3773)
    at ApplyRedirects.applyRedirectCreatreUrlTree (router.js:3729)
    at ApplyRedirects.applyRedirectCommands (router.js:3717)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

Saludos a todos, tengo el mismo problema, intento pasar un parametro ID desde el padre de los tabs para marcar un tab como predeterminado, la navegacion funciona, el inconveniente es selecccionar un tab como predeterminado con el id, :id no se encuentra, espero alguien podria guiarme como podria solucionarlo, gracias

image

Hi, did you figure this out? I am having the same issue.

Thanks