Stay Ahead with the Power of Upskilling - Invest in Yourself! 
Angular Router Links
Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:
path is a string that uses the route matcher DSL.
pathMatch is a string that specifies the matching strategy.
matcher defines a custom strategy for path matching and supersedes path and pathMatch.
component is a component type.
redirectTo is the url fragment which will replace the current matched segment.
outlet is the name of the outlet the component should be placed into.
canActivate is an array of DI tokens used to look up CanActivate handlers.
canActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
canDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
canLoad is an array of DI tokens used to look up CanLoad handlers.
data is additional data provided to the component via ActivatedRoute.
resolve is a map of DI tokens used to look up data resolvers.
runGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
children is an array of child route definitions.
loadChildren is a reference to lazy loaded child routes.
RouterLink
Overview
@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
}
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>
Selectors
:not(a)[routerLink]
Inputs
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
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’: 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).
Constructor
constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer2, el: ElementRef)
Members
queryParams: {
[k: string]: any;
}
fragment: string
queryParamsHandling: QueryParamsHandling
preserveFragment: boolean
skipLocationChange: boolean
replaceUrl: boolean
set routerLink: any[] | string
set preserveQueryParams: boolean
onClick(): boolean
get urlTree: UrlTree
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.
Back to Angular 4 Tutorial Main Page 
