The application has one router
. This is bootstrapped with RouterModule.forRoot()
within app module.
Router uses a first-match wins strategy, so define routes from most specific to least specific.
ActivatedRoute
- service containing route params, data, etc.- This changes depending on which component it's injected to
- If the component is not routed to, then it will only receive that part of the activated route
- Instead, try the
routerState
property on the router service
ActivatedRouteSnapshot
RouterState
- service current state of router, including tree of currently activated routes, and methods to traverse treeRouterStateSnapshot
Link Parameters Array
- Provided to
routerLink
directive, or toRouter.navigate()
- Provided to
router.navigate(link params, NavigationExtras)
NavigationExtras
queryParams
fragment
preserveQueryParams: boolean
preserveFragment: boolean
router.navigateByUrl
- always absolute
{
path: 'example',
component: ExampleComponent,
data: {
title: 'This is an example',
}
}
The data
property is accessible within each activated route.
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
[ '/hero', hero.id ] // /hero/1
./
or no leading slash
= relative to current level
../
= go up one level in route path
router.navigate(link params, { relativeTo: this.route })
(where this.route
is ActivatedRoute
)
Not separated by ?
and &
. Instead, separated by semicolons (Matrix URL notation), eg:
[ '/heroes', { id: heroId, foo: 'foo' } ]
= /heroes;id=15;foo=foo
this.route.params.forEach((params: Params) => {
// ...
});