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