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

Follow, below steps to pass data from tab to pages

In tabs.html

add tab=“profile/{{currentuserId}}”

<ion-tab-button mode=“ios” tab=“profile/{{currentuserId}}”>

In tab.ts

get firebase current userId or your Data Id
this.currentuserId = user.val().userId

now in tab.router.module.ts

add path: ‘profile/:id’,

const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘profile/:id’,
children: [
{
path: ‘’,
loadChildren: () =>
import(’…/profile/profile.module’).then(m => m.ProfilePageModule)
}
]
}
]…

Pero ese id que quieres pasar, ¿lo quieres como parámetro al momento de realizar una acción en tu página principal con un botón o algo?

Si me desglosas mas el problema, puedo ayudarte, ya que he realizado varias aplicaciones con el comportamiento que tu describes pero necesito saber primero lo que quieres hacer y como lo quieres hacer.

Another solution:

First of all, in the StartPage:

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

Then in app.routing.module

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

And then in CustomerRootTabPageRoutingModule.ts

const routes: Routes = [
  {
    path: '',
    component: CustomerRootTabPage
  },
  {
    path: ':customerId',
    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'
      }
    ]
  }
];

And finally in the customer-contacts-tab conttroller (or whichever controller tab page):

ngOnInit() {
  const customerId = this.activatedRoute.snapshot.parent.parent.params['customerId'];
}

Notice that :customerId is defined in CustomerRootTabPageRoutingModule.ts and in app.routing.module not.

Hope this helps!