Routing variable in Angular2

Question

I've read over the documentation for the new Angular router. The example they have for routing to a variable is this:

Component/Module:

angular.module('myApp', ['ngFuturisticRouter'])
.controller('AppController', ['$router', function($router) {
  $router.config({ path: '/user/:id' component: 'user' });
  this.user = { name: 'Brian', id: 123 };
});

HTML/Template:

<div ng-controller="AppController as app">
  <a router-link="user({id: app.user.id})">{{app.user.name}}</a>
</div>

Here is my component:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/displays/:id', component: DisplayDetails, as: 'display-details' }
])

And my HTML/Template:

<div class="col-md-3" *ng-for="#display of displays">
    <a [router-link]="['/display-details({id: display.id})']"><display-card ></display-card></a>
</div>

I've also tried instead of putting the component alias (display-details) I've tried putting the actual path and the component it self but they all give me the same error:

EXCEPTION: Component "App" has no route named "display-details({id: display.id})". in [null]

Try with [router-link]="['/display-details', {id: display.id}]", btw, what version are you using? — Eric Martinez
– Eric Martinez, Commented Oct 6, 2015 at 16:52
@EricMartinez Thank you man! I'm using alpha.37. BTW you've really helped me out with Angular2 I think you've answered all the questions I've had — ThreeAccents
– ThreeAccents, Commented Oct 6, 2015 at 17:35
@EricMartinez You wanna make it an answer so I can give a check mark — ThreeAccents
– ThreeAccents, Commented Oct 6, 2015 at 17:36

Phil · Accepted Answer · 2016-12-26 08:35:07Z

20

That syntax works in my case:

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', display.id]">
       <display-card ></display-card>
    </a>
</div>

with this router config:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/display-details/:id', component: DisplayDetails }
])

answered Dec 26, 2016 at 8:35

Phil

4,8601 gold badge43 silver badges40 bronze badges

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

Comments

Bojan Kogoj · Accepted Answer · 2016-09-01 13:33:06Z

14

As suggested by @ThreeAccents

Quoting from the documentation RouterLink.

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}.

So the solution is to change your routerLink to as follows :

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', {id: display.id}]">
       <display-card ></display-card>
    </a>
</div>

Glad it worked for you :)

edited Sep 1, 2016 at 13:33

Bojan Kogoj

5,7084 gold badges39 silver badges63 bronze badges

answered Oct 6, 2015 at 19:04

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

2 Comments

Evan Plaice Over a year ago

I updated your answer to reflect the API as of 2.0-beta. I think it's still missing 2 things. The link /display-details should be /DisplayDetails and the route 'as' parameter has been changed to 'name'.

Kyle Burkett Over a year ago

I had to use string concatenation like <a [routerLink]="['/display-details'+display.id]"> , but this helped me get most of the way there

Ali Adravi · Accepted Answer · 2018-09-23 21:53:45Z

8

For the path: '/user/:id'

We can use in two way like /user;id:1234 or /user/123

// For /user;id:1234
[routerLink]="['/user', {id: display.id}]"
// For /user/1234
[routerLink]="['/user', display.id]"

I came here for my issue with path: '/customers/:id/detail' and finally finished with:

[routerLink]="['/customers', cust.id, 'detail']"

answered Sep 23, 2018 at 21:53

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Comments

xiaoke · Accepted Answer · 2018-12-05 00:34:48Z

0

You can use a function in your component to get the dynamic URL and params by using routerLink and queryParams directive.

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="getURL(display)" 
       [queryParams]="getParams(display)>
       <display-card ></display-card>
    </a>
</div>

in component:

getURL(display) { 
    return ['/displays', display.id];
}

getParams(display) { 
    return { param: display.somethingElse }; 
}

answered Dec 5, 2018 at 0:34

xiaoke

3,5012 gold badges23 silver badges22 bronze badges

Collectives™ on Stack Overflow

Routing variable in Angular2

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related