linkRouterLink
| npm Package | @angular/router |
|---|---|
| Module | import { RouterLink } from '@angular/router'; |
| Source | router/src/directives/router_link.ts |
| NgModule | RouterModule |
Lets you link to specific parts of your app.
linkOverview
@Directive({ selector: ':not(a)[routerLink]' })
class RouterLink {
queryParams: {...}
fragment: string
queryParamsHandling: QueryParamsHandling
preserveFragment: boolean
skipLocationChange: boolean
replaceUrl: boolean
set routerLink: any[] | string
set preserveQueryParams: boolean
onClick(): boolean
get urlTree: UrlTree
}
linkHow 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>
linkSelectors
:not(a)[routerLink]
linkInputs
queryParams bound to RouterLink.queryParams
fragment bound to RouterLink.fragment
queryParamsHandling bound to RouterLink.queryParamsHandling
preserveFragment bound to RouterLink.preserveFragment
skipLocationChange bound to RouterLink.skipLocationChange
replaceUrl bound to RouterLink.replaceUrl
routerLink bound to RouterLink.routerLink
preserveQueryParams bound to RouterLink.preserveQueryParams
linkDescription
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:
<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.
(Deprecated in v4.0.0 use queryParamsHandling instead) You can also tell the
directive to preserve the current query params and fragment:
<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment>
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
Same options for NavigationExtras#queryParamsHandling.
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
link to user component
</a>
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).
See createUrlTree for more information.
linkConstructor
constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer2, el: ElementRef)
linkMembers
set routerLink: any[] | string
get urlTree: UrlTree