Angular2中的路由变量

我已经阅读了新的Angular路由器的文档。它们具有用于路由到一个变量的例子是这样的：Angular2中的路由变量

组件/模块：

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]

来源

2015-10-06 ThreeAccents

尝试使用'[router-link] =“['/ display-details'，{id：display.id}]”'，btw，您使用的是哪个版本？ –

@EricMartinez谢谢你的男人！我正在使用alpha.37。顺便说一句，你真的帮助我与Angular2我认为你已经回答了我所有的问题 – ThreeAccents

@EricMartinez你想让它成为一个答案，所以我可以给一个复选标记 – ThreeAccents

正如所建议的@ ThreeAccents

引用文档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>

高兴它为你工作:)

来源

2015-10-06 19:04:11

我更新了你的答案，以反映API的2.0-β。我认为它仍然缺少2件事。链接'/ display-details'应该是'/ DisplayDetails'，路由'as'参数已经改为'name'。 –

这句法在我的情况下工作：

<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 } 
])

来源

2016-12-26 08:35:07 Phil

Angular2中的路由变量

回答

相关问题