[routerLink] directive
Lets you link to specific routes in your app.
Consider the following route configuration:
[{ path: 'user/:name', component: UserCmp }]
.
When linking to this user/:name
route, you use the RouterLink
directive.
If the link is static, you can use the directive as follows:
<a routerLink="/user/bob">link to user component</a>
If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.
For instance ['/team', teamId, 'user', userName, {details: true}]
means that we want to generate a link to /team/11/user/bob;details=true
.
Multiple static segments can be merged into one (e.g., ['/team/11/user', userName, {details: true}]
).
The first segment name can be prepended with /
, ./
, or ../
:
- If the first segment begins with
/
, the router will look up the route from the root of the app. - If the first segment begins with
./
, or doesn't begin with a slash, the router will instead look in the children of the current activated route. - And if the first segment begins with
../
, the router will go up one level.
You can set query params and fragment as follows:
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a>
RouterLink will use these to generate this link: /user/bob#education?debug=true
.
You can also tell the directive to preserve the current query params and fragment:
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
link to user component
</a>
You can tell the directive to how to handle queryParams, available options are:
'merge'
: merge the queryParams into the current queryParams'preserve'
: preserve the current queryParams- default/
''
: use the queryParams only
The router link directive always treats the provided input as a delta to the current url.
For instance, if the current url is /user/(box//aux:team)
.
Then the following link <a [routerLink]="['/user/jim']">Jim</a>
will generate the link
/user/(jim//aux:team)
.