{"id":59890,"date":"2018-05-03T15:58:02","date_gmt":"2018-05-03T10:28:02","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59890"},"modified":"2024-04-12T14:20:49","modified_gmt":"2024-04-12T08:50:49","slug":"angular-router-links","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-router-links\/","title":{"rendered":"Angular Router Links"},"content":{"rendered":"

Angular Router Links<\/h1>\n

Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:<\/p>\n

path is a string that uses the route matcher DSL.
\npathMatch is a string that specifies the matching strategy.
\nmatcher defines a custom strategy for path matching and supersedes path and pathMatch.
\ncomponent is a component type.
\nredirectTo is the url fragment which will replace the current matched segment.
\noutlet is the name of the outlet the component should be placed into.
\ncanActivate is an array of DI tokens used to look up CanActivate handlers.
\ncanActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
\ncanDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
\ncanLoad is an array of DI tokens used to look up CanLoad handlers.
\ndata is additional data provided to the component via ActivatedRoute.
\nresolve is a map of DI tokens used to look up data resolvers.
\nrunGuardsAndResolvers 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.
\nchildren is an array of child route definitions.
\nloadChildren is a reference to lazy loaded child routes.<\/p>\n

RouterLink<\/strong><\/p>\n

Overview
\n@Directive({ selector: ‘:not(a)[routerLink]’ })
\nclass RouterLink {
\nqueryParams: {…}
\nfragment: string
\nqueryParamsHandling: QueryParamsHandling
\npreserveFragment: boolean
\nskipLocationChange: boolean
\nreplaceUrl: boolean
\nset routerLink: any[] | string
\nset preserveQueryParams: boolean
\nonClick(): boolean
\nget urlTree: UrlTree
\n}<\/p>\n

How To Use
\nConsider the following route configuration: [{ path: ‘user\/:name’, component: UserCmp }]\n

When linking to this user\/:name route, you can write: <a routerLink=’\/user\/bob’>link to user component<\/a><\/p>\n

Selectors
\n:not(a)[routerLink]\n

Inputs
\nqueryParams bound to RouterLink.queryParams
\nfragment bound to RouterLink.fragment
\nqueryParamsHandling bound to RouterLink.queryParamsHandling
\npreserveFragment bound to RouterLink.preserveFragment
\nskipLocationChange bound to RouterLink.skipLocationChange
\nreplaceUrl bound to RouterLink.replaceUrl
\nrouterLink bound to RouterLink.routerLink
\npreserveQueryParams bound to RouterLink.preserveQueryParams<\/p>\n

Description
\nThe RouterLink directives let you link to specific parts of your app.<\/p>\n

When the link is static, you can use the directive as follows: <a routerLink=”\/user\/bob”>link to user component<\/a><\/p>\n

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.<\/p>\n

For instance [‘\/team’, teamId, ‘user’, userName, {details: true}] means that we want to generate a link to \/team\/11\/user\/bob;details=true.<\/p>\n

Multiple static segments can be merged into one (e.g., [‘\/team\/11\/user’, userName, {details: true}]).<\/p>\n

The first segment name can be prepended with \/, .\/, or ..\/:<\/p>\n

If the first segment begins with \/, the router will look up the route from the root of the app.
\nIf 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.
\nAnd if the first segment begins with ..\/, the router will go up one level.<\/p>\n

You can set query params and fragment as follows:<\/p>\n

<a [routerLink]=”[‘\/user\/bob’]” [queryParams]=”{debug: true}” fragment=”education”>
\nlink to user component
\n<\/a><\/p>\n

RouterLink will use these to generate this link: \/user\/bob#education?debug=true.<\/p>\n

(Deprecated in v4.0.0 use queryParamsHandling instead) You can also tell the directive to preserve the current query params and fragment:<\/p>\n

<a [routerLink]=”[‘\/user\/bob’]” preserveQueryParams preserveFragment>
\nlink to user component
\n<\/a><\/p>\n

You can tell the directive to how to handle queryParams, available options are:<\/p>\n

‘merge’: merge the queryParams into the current queryParams
\n‘preserve’: preserve the current queryParams
\ndefault\/”: use the queryParams only<\/p>\n

Same options for NavigationExtras#queryParamsHandling.<\/p>\n

<a [routerLink]=”[‘\/user\/bob’]” [queryParams]=”{debug: true}” queryParamsHandling=”merge”>
\nlink to user component
\n<\/a><\/p>\n

The router link directive always treats the provided input as a delta to the current url.<\/p>\n

For instance, if the current url is \/user\/(box\/\/aux:team).<\/p>\n

Then the following link <a [routerLink]=”[‘\/user\/jim’]”>Jim<\/a> will generate the link \/user\/(jim\/\/aux:team).<\/p>\n

Constructor
\nconstructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer2, el: ElementRef)<\/p>\n

Members
\nqueryParams: {
\n[k: string]: any;
\n}<\/p>\n

fragment: string
\nqueryParamsHandling: QueryParamsHandling
\npreserveFragment: boolean
\nskipLocationChange: boolean
\nreplaceUrl: boolean
\nset routerLink: any[] | string
\nset preserveQueryParams: boolean
\nonClick(): boolean
\nget urlTree: UrlTree<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n