Ionic 4 Tab navigation params

maxkoch · March 23, 2019, 8:58am

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

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

haythoo · March 25, 2019, 10:23am

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

haythoo · March 25, 2019, 10:24am

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!

maxkoch · March 25, 2019, 1:48pm

Thnx, bro

Sapphire · August 29, 2019, 9:04am

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)

ajhonny · October 17, 2019, 4:31pm

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

binarytechnologies · January 28, 2020, 4:35pm

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

Thanks

pvicky21 · March 27, 2020, 11:55pm

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)
}
]
}
]…

TotalHobbies · March 28, 2020, 2:28am

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.

felipejnc · July 1, 2020, 12:40am

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!

mrakodol · December 11, 2022, 5:44am

Thank you for this a loot @felipejnc I google it all day and finally find something that works! Tnx a loot!