{ "id": "api/router/RouterLink", "title": "RouterLink", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

RouterLinklink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

When applied to an element in a template, makes that element a link\nthat initiates navigation to a route. Navigation opens one or more routed components\nin one or more <router-outlet> locations on the page.

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
queryParams?: Params | null\n 		\n \n

Passed to Router#createUrlTree as part of the\nUrlCreationOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
fragment?: string\n 		\n \n

Passed to Router#createUrlTree as part of the\nUrlCreationOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
queryParamsHandling?: QueryParamsHandling | null\n 		\n \n

Passed to Router#createUrlTree as part of the\nUrlCreationOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
preserveFragment: boolean\n 		\n \n

Passed to Router#createUrlTree as part of the\nUrlCreationOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
skipLocationChange: boolean\n 		\n \n

Passed to Router#navigateByUrl as part of the\nNavigationBehaviorOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
replaceUrl: boolean\n 		\n \n

Passed to Router#navigateByUrl as part of the\nNavigationBehaviorOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
state?: {\n [k: string]: any;\n}\n 		\n \n

Passed to Router#navigateByUrl as part of the\nNavigationBehaviorOptions.

\n\n \n

See also:

\n \n \n
\n \n @Input()
relativeTo?: ActivatedRoute | null\n 		\n \n

Passed to Router#createUrlTree as part of the\nUrlCreationOptions.\nSpecify a value here when you do not want to use the default value\nfor routerLink, which is the current activated route.\nNote that a value of undefined here will use the routerLink default.

\n\n \n

See also:

\n \n \n
\n \n @Input()
routerLink: string | any[]\n 		Write-Only\n \n

Commands to pass to Router#createUrlTree.

\n
    \n
  • array: commands to pass to Router#createUrlTree.
    • \n
  • string: shorthand for array of commands with just the string, i.e. ['/route']
    • \n
  • null|undefined: shorthand for an empty array of commands, i.e. []
    • \n
\n\n \n

See also:

\n \n \n
\n \n urlTree: UrlTree\n Read-Only\n \n \n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

Given a route configuration [{ path: 'user/:name', component: UserCmp }],\nthe following creates a static link to the route:\n<a routerLink=\"/user/bob\">link to user component</a>

\n

You can use dynamic values to generate the link.\nFor a dynamic link, pass an array of path segments,\nfollowed by the params for each segment.\nFor example, ['/team', teamId, 'user', userName, {details: true}]\ngenerates a link to /team/11/user/bob;details=true.

\n

Multiple static segments can be merged into one term and combined with dynamic segements.\nFor example, ['/team/11/user', userName, {details: true}]

\n

The input that you provide to the link is treated as a delta to the current URL.\nFor instance, suppose the current URL is /user/(box//aux:team).\nThe link <a [routerLink]=\"['/user/jim']\">Jim</a> creates the URL\n/user/(jim//aux:team).\nSee createUrlTree for more information.

\n\n

You can use absolute or relative paths in a link, set query parameters,\ncontrol how parameters are handled, and keep a history of navigation states.

\n\n

The first segment name can be prepended with /, ./, or ../.

\n
    \n
  • If the first segment begins with /, the router looks up the route from the root of the\napp.
    • \n
  • If the first segment begins with ./, or doesn't begin with a slash, the router\nlooks in the children of the current activated route.
    • \n
  • If the first segment begins with ../, the router goes up one level in the route tree.
    • \n
\n

Setting and handling query params and fragmentslink

\n

The following link adds a query parameter and a fragment to the generated URL:

\n\n<a [routerLink]=\"['/user/bob']\" [queryParams]=\"{debug: true}\" fragment=\"education\">\n link to user component\n</a>\n\n

By default, the directive constructs the new URL using the given query parameters.\nThe example generates the link: /user/bob?debug=true#education.

\n

You can instruct the directive to handle query parameters differently\nby specifying the queryParamsHandling option in the link.\nAllowed values are:

\n
    \n
  • 'merge': Merge the given queryParams into the current query params.
    • \n
  • 'preserve': Preserve the current query params.
    • \n
\n

For example:

\n\n<a [routerLink]=\"['/user/bob']\" [queryParams]=\"{debug: true}\" queryParamsHandling=\"merge\">\n link to user component\n</a>\n\n

See UrlCreationOptions#queryParamsHandling.

\n

Preserving navigation historylink

\n

You can provide a state value to be persisted to the browser's\nHistory.state property.\nFor example:

\n\n<a [routerLink]=\"['/user/bob']\" [state]=\"{tracingId: 123}\">\n link to user component\n</a>\n\n

Use Router#getCurrentNavigation to retrieve a saved\nnavigation-state value. For example, to capture the tracingId during the NavigationStart\nevent:

\n\n// Get NavigationStart events\nrouter.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {\n const navigation = router.getCurrentNavigation();\n tracingService.trace({id: navigation.extras.state.tracingId});\n});\n\n\n
\n \n\n \n\n \n\n \n\n \n \n \n\n
\n
\n\n\n" }