The RouterLink directive lets you link to specific parts of your app.

Consider the following route configuration:

@RouteConfig(const [
  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])

When linking to this Heroes route, you can write:

template: '''
  <h1>{{title}}</h1>
  <a [routerLink]="['Heroes']">Heroes</a>
  <router-outlet></router-outlet>''',

RouterLink expects the value to be an array of route names, followed by the params for that level of routing. For instance ['/Team', {teamId: 1}, 'User', {userId: 2}] means that we want to generate a link for the Team route with params {teamId: 1}, and with a child route User with params {userId: 2}.

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.

Annotations
  • @Directive(selector: "[routerLink]", host: const {"(click)" : "onClick(\$event)", "[attr.href]" : "visibleHref", "[class.router-link-active]" : "isRouteActive"}, visibility: Visibility.none)

Constructors

Properties

isRouteActive → bool
read-only
routeParams List changes
@Input('routerLink'), write-only
target String
@Input(), read / write
visibleHref String
read / write
hashCode → int
The hash code for this object. [...]
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

onClick(MouseEvent event) → void
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(other) → bool
The equality operator. [...]
inherited