Accessing route params in children

Question

I am trying to access params from a child and can't seem to access them. I have my routes organized as follows:

const clientsRoutes: Routes = [
  {
    path: 'clients',
    component: ClientIndexPage,
    // loadChildren: "./client-index/client-index.module#ClientIndexPageModule",
    canActivate: [AuthGuard],
  },
  { path: 'clients/:id',
    component: ClientDetailPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'profile',
        component: ProfilePage
        // loadChildren: './client-detail/profile/profile.module#ProfilePageModule',
      },
      {
        path: 'finance',
        component: FinancePage
        // loadChildren: './client-detail/finance/finance.module#FinancePageModule'
      },
      {
        path: '',
        redirectTo: 'profile',
        pathMatch: 'full'
      }
    ]
  },
];

From ClientDetailPage I can access the :id, but when I attempt to grab it from the ProfilePage, It is inaccessible:

// ClientDetailsPage
console.log(this.route.snapshot.paramMap.get('id)
// returns the correct value

// ProfilePage
console.log(this.route.snapshot.paramMap.get('id))
// returns null
console.log(this.route.parent)
//returns null

Is there something I am missing? It might be worth noting that ClientDetailsPage and ProfilePage both have seperate modules.

check this answer https://stackoverflow.com/a/42949123/7179294 — Ala Abid, Apr 26 '19 at 22:51

score 0 · Answer 1 · answered Apr 27 '19 at 23:44

The following will access the id param for the activated route.

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

But what is making this not to work is what is considered an activated route. Only the exact child route that matches is considered the activated route, thus your parent for the route that contains the id param is not in the activated route.

// assuming a route like clients/2/profile
{
    path: 'profile',
    component: ProfilePage
}

Good news is you can access the parent object of that route as shown below.

// calling route.parent moves us one route up the tree, where id is a param
this.route.parent.snapshot.paramMap.get('id');

Accessing route params in children

1 Answers1