Angular 2 RC5 - Routing with dynamic values in parameter

Question

I recently upgraded angular application from RC1 to RC5.

In RC1, I defined routes in app.component.ts:

@RouteConfig([
  { path: '/dashboard', name: 'Dashboard', component: DashboardContainer, useAsDefault: true },
  { path: '/dashboard/:id/:name', name: 'DashboardName', component: DashboardContainer }
])

And in template, I generated links using:

<a [routerLink]="[/Dashboard, routeParams]"> ... </a> where routeParams is { } generates a link <a href="/dashboard">...</a>

<a [routerLink]="[/DashboardName, routeParams]"> ... </a> where routeParams is { id: 2, name: 'joy' } generates a link <a href="/dashboard/2/joy">...</a>

How can I achieve the same in RC5?

What kind of parameters are they? Route parameters, query parameters? How do the routes look like? — Günter Zöchbauer, Aug 25 '16 at 05:42
route parameters...appended after route path i.e. `/path/2/name` where 2 & name could be dynamic — Apul Gupta, Aug 25 '16 at 05:43
So passing route parameters as shown in your question doesn't work? I haven't tried it. I always did as demonstrated in my answer. — Günter Zöchbauer, Aug 25 '16 at 06:00
it doesn't accept name of routes in app.routing.ts now...only path & componentName..how can I differentiate routes with parameters if using the same prefix i.e. `\dashboard`? — Apul Gupta, Aug 25 '16 at 06:03
I see. I somehow assumed it's about parameters (question title). There are no route names in RC.5 only path. — Günter Zöchbauer, Aug 25 '16 at 06:04
yes..correct. then how to achieve the same thing which I demonstrated in my question. — Apul Gupta, Aug 25 '16 at 06:05

Günter Zöchbauer · Answer 1 · 2016-08-25T06:11:49.093

0

I assume what you want is something like

<a [routerLink]="['/dashboard', 2]"> ... </a>
<a [routerLink]="['/dashboard/' + 2]"> ... </a>
<a routerLink="{{'/dashboard/' + 2}}"> ... </a>

<a [routerLink]="['/dashboard', 2, name]"> ... </a>
<a [routerLink]="['/dashboard/' + 2 + '/' + name]"> ... </a>

assuming id and name are router parameter.

Passing an array adds them as query or matrix parameters.

<a [routerLink]="['/dashboard', {id: 2, 'name': name}]"> ... </a>

edited Aug 25 '16 at 06:11

answered Aug 25 '16 at 05:43

Günter Zöchbauer

623,577
216
2,003
1,567

But, I didn't find if we can put names in route in RC5. it allows only path & component in route definition – Apul Gupta Aug 25 '16 at 05:44
I am explaining my question more...Please check it now & reply. – Apul Gupta Aug 25 '16 at 05:58
it doesn't work... it gives me url like `/dashboard;id:2;name:name` which is not what exactly my url should look like. – Apul Gupta Aug 25 '16 at 06:16
What is "it"? I mentioned for the last example that it creates query or matrix parameters. Your comment shows matrix parameters. – Günter Zöchbauer Aug 25 '16 at 06:17
I tried your last solution to pass id & name in the similar way I was using earlier but it generates `/dashboard;id:2;name:name` which is not what I want. I want url to be `/dashboard/2/name` & if I receive it in component, it should give me value for `id` parameter as 2. – Apul Gupta Aug 25 '16 at 06:19
Just because you pass them without parameter names doesn't mean you can't get them by name. They are applied by position and mapped to their name. http://stackoverflow.com/questions/38712528/how-to-pass-parameters-to-routes-in-angular2-0/38712537#38712537. See also https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters – Günter Zöchbauer Aug 25 '16 at 06:23
But, what if parameters are to be passed using a variable name & if there could be multiple binding? In my question, `routeParams` is a variable having all `key: value` bindings. – Apul Gupta Aug 26 '16 at 05:28
I don't know what you mean by multiple binding. Can you post an example a route definition and a matching routerlink? – Günter Zöchbauer Aug 26 '16 at 05:33

Angular 2 RC5 - Routing with dynamic values in parameter

1 Answers1