Angular 2 fetching url parameters with Child routes

Question

Im just learning how to use Angular 2, and I am currently working with routes. What I'm trying to do is fetch a route parameter using child routes.

I'm currently working on an application that can display a users details. The url would look like this.

localhost:4200/user/id/details

For this application I am using a UserComponent and a DetailsComponent that is nested in the user folder. And I just want to be able to change the url and fetch the url segment in my component.

What I am doing to try and fetch the url is using the ActivatedRoute from '@angular/router' within the constructor of the DetailsComponent and assigning it to the id property, which I use string interpolation to view it in the template. Here is the actual code from the DetailsComponent:

import { Component, OnInit, OnDestroy  } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';

@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styles: []
})
export class DetailsComponent implements OnInit, OnDestroy {


id: string;

private subscription : Subscription;

constructor( private router: Router, private activatedRoute: ActivatedRoute ) { 
    this.subscription = activatedRoute.params.subscribe(
        (param: any) => this.id = param['id']
    );
}

ngOnInit() {
}

ngOnDestroy() {
this.subscription.unsubscribe();
}
}

However the parameter isn't updated and shown in the template file. This approach works, because its the exact code I used in another component and I was able to display the id in the template file. so everything seems to be in place. The router-outlet is in the right place, and the routes and child routes are defined correctly, because the template file does load, it just doesn't display the id from the url segment.

This is basically how I image working with a database of some sort later, and I basically just want to be able to fetch that segment to fetch information from a database later on. So I'm just not sure why this isn't working. Should I be using queryParameters for this? Or is it ok to do it this way a have a pretty url? and if so, what am I doing wrong?

Here is the routes These routes are defined in the user directory

import { Routes } from '@angular/router';

import { DetailsComponent } from './details.component';
import { EditComponent } from './edit.component';

export const USER_ROUTES: Routes = [
{ path: 'details', component: DetailsComponent },
{ path: 'edit', component: EditComponent }
];

here are the app.routing.ts file

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { ProductsComponent } from './products/products.component';
import { UserComponent } from './user/user.component';
import { USER_ROUTES } from './user/user.routes';

const APP_ROUTES: Routes = [
{ path: 'user/:id', component: UserComponent, children: USER_ROUTES },
{ path: 'user', component: UserComponent },  
{ path: 'products/:id', component: ProductsComponent },
{ path: 'products', component: ProductComponent },
{ path: '', component: HomeComponent }

];

export const routing = RouterModule.forRoot(APP_ROUTES);

In the details html template I have

<p>You are currently viewing the details of User number {{ id }}.</p>

In the user html template i have

<p>User Component</p>
<router-outlet></router-outlet>

Socialist

can you post your route config where your routes are defined.. – Mercantilism

Post all the relevant code: route definitions, templates, etc. Saying that everything is setup correctly doesn't really help us understanding how it's set up. – Banks

Answer 1

You're trying to access a parameter (id) of the route

{ path: 'user/:id', component: UserComponent, children: USER_ROUTES }

from inside the component of the route

{ path: 'details', component: DetailsComponent }

which doesn't have any id parameter, but is the child of the route which has this parameter. So you need to get the parameter from the parent route:

this.subscription = activatedRoute.parent.params.subscribe(
    (param: any) => this.id = param['id']
);

Banks

Yeah, Im sure your right, and I made some adjustment to the route so that the :id is in the child portion of the routes, and it works. The url lookslike this now: localhost:4200/user/details/99> I guess in order to use the other way around I would have to pass the id through a service of something? – Socialist

As I said in my answer, you would have to get the ID from the parent route. – Banks

Answer 2

Write this inside ngOnInit.

this.id = activatedRoute.parent.snapshot.params['id'];

Claudette