Rangle.io : Angular Training
Search…
Using Route Parameters
Say we are creating an application that displays a product list. When the user clicks on a product in the list, we want to display a page showing the detailed information about that product. To do this you must:
- add a route parameter ID
- link the route to the parameter
- add the service that reads the parameter.
Declaring Route Parameters
The route for the component that displays the details for a specific product would need a route parameter for the ID of that product. We could implement this using the following
Routes:1
export const routes: Routes = [
2
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
3
{ path: 'product-list', component: ProductList },
4
{ path: 'product-details/:id', component: ProductDetails }
5
];
Copied!
Note
:id in the path of the product-details route, which places the parameter in the path. For example, to see the product details page for product with ID 5, you must use the following URL: localhost:3000/product-details/5Linking to Routes with Parameters
In the
ProductList component you could display a list of products. Each product would have a link to the product-details route, passing the ID of the product:1
<a *ngFor="let product of products"
2
[routerLink]="['/product-details', product.id]">
3
{{ product.name }}
4
</a>
Copied!
Note that the
routerLink directive passes an array which specifies the path and the route parameter. Alternatively we could navigate to the route programmatically:1
goToProductDetails(id) {
2
this.router.navigate(['/product-details', id]);
3
}
Copied!
Reading Route Parameters
The
ProductDetails component must read the parameter, then load the product based on the ID given in the parameter.The
ActivatedRoute service provides a params Observable which we can subscribe to to get the route parameters (see Observables).1
import { Component, OnInit, OnDestroy } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3
​
4
@Component({
5
selector: 'product-details',
6
template: `
7
<div>
8
Showing product details for product: {{id}}
9
</div>
10
`,
11
})
12
export class LoanDetailsPage implements OnInit, OnDestroy {
13
id: number;
14
private sub: any;
15
​
16
constructor(private route: ActivatedRoute) {}
17
​
18
ngOnInit() {
19
this.sub = this.route.params.subscribe(params => {
20
this.id = +params['id']; // (+) converts string 'id' to a number
21
​
22
// In a real app: dispatch action to load the details here.
23
});
24
}
25
​
26
ngOnDestroy() {
27
this.sub.unsubscribe();
28
}
29
}
Copied!
The reason that theparamsproperty onActivatedRouteis an Observable is that the router may not recreate the component when navigating to the same component. In this case the parameter may change without the component being recreated.
Last modified 9mo ago