What it does
Lets you link to specific parts of your app.
How to use
Consider the following route configuration:
[{ path: 'user/:name', component: UserCmp }]
When linking to this user/:name route, you can write:
<a routerLink='/user/bob'>link to user component</a>
Class Overview
class RouterLink {constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer, el: ElementRef)
queryParams: {[k: string]: any}
fragment: string
queryParamsHandling: QueryParamsHandling
preserveFragment: boolean
skipLocationChange: boolean
replaceUrl: boolean
routerLink
preserveQueryParams
onClick() : boolean
urlTree: UrlTree
}
Selectors
:not(a)[routerLink]
Class Description
The RouterLink directives let you link to specific parts of your app.
When 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:
RouterLink will use these to generate this link: /user/bob#education?debug=true.
(Deprecated in v4.0.0 use queryParamsHandling instead) You can also tell the
directive to preserve the current query params and fragment:
You can tell the directive to how to handle queryParams, available options are:
- 'merge' merge the queryParams into the current queryParams
- 'preserve' prserve the current queryParams
- default / '' use the queryParams only
same options for
queryParamsHandling
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).
Constructor
Class Details
exported from router/index, defined in router/src/directives/router_link.ts