Search code examples
angularrouteslazy-loadingangular-routingrouteparams

Angular Router: can´t access to route parameters in children paths


In our main app.component routing we have this:

  { path: 'store', loadChildren: './store/store.module#StoreModule', canActivate: [LoginGuard] },

and then in the module we have routes like this:

const routes: Routes = [

  { path: '', component: StoreStartPageComponent},
  {
    path: ':name/:id', component: CategoryPageComponent,
    children: [
      {
        path: ':childName/:childId', component: CategorySubPageComponent,
        children: [
          { path: ':childName/:childId', component: CategorySubSubPageComponent }
        ]
      }
    ]
  },

  { path: '**', component: PageNotFoundComponent }

];

Now what I need is to get the param['id'] like:

  this.route.params
  .switchMap((params: Params) => params['id'])
  .subscribe(id => console.log('id', id));

the strange thing is that this only works for path: ':name/:id' and not it's children. What am I missing?


Solution

  • Perhaps I should't admit this but the problem was rather dumb.. child routes params are named "childName" and "childId"... soooo.. renaming to match the parent ":name" and ":id" and then things started to happen!