Переменная маршрутизации в Angular2

Question

Я прочитал документацию для нового Углового маршрутизатора. Пример они имеют для маршрутизации переменной заключается в следующем:

Компонент/Модуль:

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

HTML/Шаблон:

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

Вот мой компонент:

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

И мой HTML/шаблон:

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

Я также попытался вместо того, чтобы поместить псевдоним (display-details) компонента Я пытался положить фактический путь и компонент это сам, но все они дают мне ту же ошибку:

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

Answer 1

Как было предложено @ ТриАксцентры

Цитирование из документации 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} .

Таким образом, решение, чтобы изменить ваш routerLink к следующим образом:

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

рад, что работал для вас :)

Answer 2

Этот синтаксис работает в моем случае:

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

с этим конфигуратором маршрутизатора:

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