CODEWITHSUNDEEP
angular
Robbie Mills
Robbie Mills

Reputation: 2945

Getting a Route parameter in an Angular child component

I'm unable to get a routing parameter from a child component in my Angular 6 application

I have the following routes set up in app-routing.module:

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

And then this in my inbox-routing-module.ts:

{
    path: '',
    component: InboxComponent,
    children: [
        { path: '', redirectTo: 'messages',  pathMatch: 'full' },
        {
            path: 'messages', component: MessagesComponent
        },
    ]
}

This allows me to have a url that looks like this to get to my messages component:

item/5200/inbox/messages

My problem is that in my ItemLayoutComponent I can get the value of the id field (in this case 5200) with the following code:

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

However I need the value of this ID in my MessagesComponent. Currently the same code gives me null.

Upvotes: 10

Views: 13347

Answers (3)

Gopinath
Gopinath

Reputation: 266

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] },
];

Upvotes: 1

Robbie Mills
Robbie Mills

Reputation: 2945

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

Upvotes: 22

Akj
Akj

Reputation: 7231

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

Upvotes: 2

Related Questions