Angular2中的路由变量

Question

我已经阅读了新Angular路由器的文档.他们用于路由到变量的示例如下:

组件/模块:

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

该语法适用于我的情况:

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

Answer 2

正如@ThreeAccents所建议的那样

引用文档RouterLink.

RouterLink期望该值是路由名称数组,后跟该路由级别的参数.例如,['/Team', {teamId: 1}, 'User', {userId: 2}]意味着我们要为Team带有params 的路由生成链接{teamId: 1},并使用带有params的子路由User {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 3

对于路径：'/ user /：id'

我们可以两种方式使用/ user; id：1234或/ user / 123

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

我来到这里的原因是路径“ / customers /：id / detail”，最后完成了：

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