W3cubDocs

/Angular 4 TypeScript

RouterLink

Stable Directive

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:

<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' prserve the current queryParams
  • default / '' use the queryParams only same options for 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).

Constructor

constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer, el: ElementRef)

Class Details

queryParams : {[k: string]: any}
fragment : string
queryParamsHandling : QueryParamsHandling
preserveFragment : boolean
skipLocationChange : boolean
replaceUrl : boolean
preserveQueryParams
onClick() : boolean
urlTree : UrlTree

exported from router/index, defined in router/src/directives/router_link.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html