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
– Günter Zöchbauer, Commented Aug 25, 2016 at 5:42
route parameters...appended after route path i.e. /path/2/name where 2 & name could be dynamic — Apul Gupta
– Apul Gupta, Commented Aug 25, 2016 at 5: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
– Günter Zöchbauer, Commented Aug 25, 2016 at 6: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
– Apul Gupta, Commented Aug 25, 2016 at 6: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
– Günter Zöchbauer, Commented Aug 25, 2016 at 6:04

Günter Zöchbauer · Accepted Answer · 2016-08-25 06:11:49Z

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, 2016 at 6:11

answered Aug 25, 2016 at 5:43

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Apul Gupta Over a year ago

But, I didn't find if we can put names in route in RC5. it allows only path & component in route definition

Apul Gupta Over a year ago

I am explaining my question more...Please check it now & reply.

Apul Gupta Over a year ago

it doesn't work... it gives me url like /dashboard;id:2;name:name which is not what exactly my url should look like.

Günter Zöchbauer Over a year ago

What is "it"? I mentioned for the last example that it creates query or matrix parameters. Your comment shows matrix parameters.

Apul Gupta Over a year ago

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.

|

Collectives™ on Stack Overflow

Angular 2 RC5 - Routing with dynamic values in parameter

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related