Getting a Route parameter in an Angular child component

Problem I faced was, route param in root module path is not exist in feature module's activate snapshot.

From @jonrsharpe, I used to run while loop in bottom-up approach until route param found in parents.

var cgName: string = "";
cgName = next.paramMap.get('cgname');
var snap = next;

while (cgName === null && snap.parent !== null) {
     cgName = snap.parent.paramMap.get('cgname');
     snap = snap.parent;
}

My route definition was like,

Root Module

const appRoutes: Routes = [
  { path: 'default', component: DefaultComponent },
  {
    path: ':cgname',
    canActivate: [PathGuard],
    component: LoggedUserLayoutComponent,
    children: [
      { path: 'shop', loadChildren: () => import('./../ShoppingModule/shopping.module').then(mod => mod.ShoppingModule) },
      { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
      { path: '', component: LoginRedirectProxyComponent, pathMatch: 'prefix' }
    ]
  },
  { path: '', redirectTo: '/default', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

Feature Module

const routes: Routes = [
  { path: 'product', component: ProductDetailComponent, canActivate: [PathGuard] },
  { path: '', component: ShopPageComponent, canActivate: [PathGuard] },
];

Try like this:

HTML :

{
    path: 'item/:id',
    component: ItemLayoutComponent,
    children: [
        { path: '', redirectTo: 'inbox',  pathMatch: 'full' },
        { path: 'inbox', loadChildren: './feature/inbox/inbox.module#InboxModule' }
    ]
},

TS:

import { Router, ActivatedRoute } from '@angular/router';

id: any;

constructor(
        private router: Router,
        private route: ActivatedRoute,
    ) {
    }

this.route.paramMap.subscribe(param => {
            this.id = param.get('id');
        });

Turns out I needed the following:

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

Thanks to @jonrsharpe for pointing me in the right direction

Tags:

Angular