directive
When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet>
locations on the page.
:not(a):not(area)[routerLink]
Property | Description |
---|---|
@Input()queryParams?: Params | null | Passed to Router#createUrlTree as part of the See also: |
@Input()fragment?: string | Passed to Router#createUrlTree as part of the See also: |
@Input()queryParamsHandling?: QueryParamsHandling | null | Passed to Router#createUrlTree as part of the See also: |
@Input()preserveFragment: boolean | Passed to Router#createUrlTree as part of the See also: |
@Input()skipLocationChange: boolean | Passed to Router#navigateByUrl as part of the See also: |
@Input()replaceUrl: boolean | Passed to Router#navigateByUrl as part of the See also: |
@Input()state?: {
[k: string]: any;
} | Passed to Router#navigateByUrl as part of the See also: |
@Input()relativeTo?: ActivatedRoute | null | Passed to Router#createUrlTree as part of the See also: |
@Input()routerLink: string | any[] | Write-Only Commands to pass to Router#createUrlTree.
See also: |
urlTree: UrlTree | Read-Only |
Given a route configuration [{ path: 'user/:name', component: UserCmp }]
, the following creates a static link to the route: <a routerLink="/user/bob">link to user component</a>
You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}]
generates a link to /team/11/user/bob;details=true
.
Multiple static segments can be merged into one term and combined with dynamic segements. For example, ['/team/11/user', userName, {details: true}]
The input that you provide to the link is treated as a delta to the current URL. For instance, suppose the current URL is /user/(box//aux:team)
. The link <a [routerLink]="['/user/jim']">Jim</a>
creates the URL /user/(jim//aux:team)
. See createUrlTree for more information.
You can use absolute or relative paths in a link, set query parameters, control how parameters are handled, and keep a history of navigation states.
The first segment name can be prepended with /
, ./
, or ../
.
/
, the router looks up the route from the root of the app../
, or doesn't begin with a slash, the router looks in the children of the current activated route.../
, the router goes up one level in the route tree.The following link adds a query parameter and a fragment to the generated URL:
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> link to user component </a>
By default, the directive constructs the new URL using the given query parameters. The example generates the link: /user/bob?debug=true#education
.
You can instruct the directive to handle query parameters differently by specifying the queryParamsHandling
option in the link. Allowed values are:
'merge'
: Merge the given queryParams
into the current query params.'preserve'
: Preserve the current query params.For example:
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge"> link to user component </a>
See UrlCreationOptions#queryParamsHandling.
You can provide a state
value to be persisted to the browser's History.state
property. For example:
<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}"> link to user component </a>
Use Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the tracingId
during the NavigationStart
event:
// Get NavigationStart events router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => { const navigation = router.getCurrentNavigation(); tracingService.trace({id: navigation.extras.state.tracingId}); });
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/router/RouterLink