Rangle.io : Angular Training
Search…
Defining Child Routes
When some routes may only be accessible and viewed within other routes it may be appropriate to create them as child routes.
For example: The product details page may have a tabbed navigation section that shows the product overview by default. When the user clicks the "Technical Specs" tab the section shows the specs instead.
If the user clicks on the product with ID 3, we want to show the product details page with the overview:
localhost:3000/product-details/3/overviewWhen the user clicks "Technical Specs":
localhost:3000/product-details/3/specsoverview and specs are child routes of product-details/:id. They are only reachable within product details.Our
Routes with children would look like: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
children: [
6
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
7
{ path: 'overview', component: Overview },
8
{ path: 'specs', component: Specs }
9
]
10
}
11
];
Copied!
Where would the components for these child routes be displayed? Just like we had a
<router-outlet></router-outlet> for the root application component, we would have a router outlet inside the ProductDetails component. The components corresponding to the child routes of product-details would be placed in the router outlet in ProductDetails.1
import { Component, OnInit, OnDestroy } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3
​
4
@Component({
5
selector: 'product-details',
6
template: `
7
<p>Product Details: {{id}}</p>
8
<!-- Product information -->
9
<nav>
10
<a [routerLink]="['overview']">Overview</a>
11
<a [routerLink]="['specs']">Technical Specs</a>
12
</nav>
13
<router-outlet></router-outlet>
14
<!-- Overview & Specs components get added here by the router -->
15
`
16
})
17
export default class ProductDetails implements OnInit, OnDestroy {
18
id: number;
19
​
20
constructor(private route: ActivatedRoute) {}
21
​
22
ngOnInit() {
23
this.sub = this.route.params.subscribe(params => {
24
this.id = +params['id']; // (+) converts string 'id' to a number
25
});
26
}
27
​
28
ngOnDestroy() {
29
this.sub.unsubscribe();
30
}
31
}
Copied!
Alternatively, we could specify
overview route URL simply as:localhost:3000/product-details/31
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
children: [
6
{ path: '', component: Overview },
7
{ path: 'specs', component: Specs }
8
]
9
}
10
];
Copied!
Since the
Overview child route of product-details has an empty path, it will be loaded by default. The specs child route remains the same.Accessing a Parent's Route Parameters
In the above example, say that the child routes of
product-details needed the ID of the product to fetch the spec or overview information. The child route component can access the parent route's parameters as follows:1
export default class Overview {
2
parentRouteId: number;
3
private sub: any;
4
​
5
constructor(private router: Router,
6
private route: ActivatedRoute) {}
7
​
8
ngOnInit() {
9
// Get parent ActivatedRoute of this route.
10
this.sub = this.router.routerState.parent(this.route)
11
.params.subscribe(params => {
12
this.parentRouteId = +params["id"];
13
});
14
}
15
​
16
ngOnDestroy() {
17
this.sub.unsubscribe();
18
}
19
}
Copied!
Links
Routes can be prepended with
/, or ../; this tells Angular where in the route tree to link to.Prefix
Looks in
/Root of the application
none
Current component children routes
../Current component parent routes
Example:
1
<a [routerLink]="['route-one']">Route One</a>
2
<a [routerLink]="['../route-two']">Route Two</a>
3
<a [routerLink]="['/route-three']">Route Three</a>
Copied!
In the above example, the link for route one links to a child of the current route. The link for route two links to a sibling of the current route. The link for route three links to a child of the root component (same as route one link if current route is root component).
Last modified 9mo ago
Copy link