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>

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

和我的HTML/模板：

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

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

---

正如@ThreeAccents所建议的那样

从文件中引用

RouterLink希望该值是路由名称的数组，后跟该级别路由的参数。例如，

['/Team'，{teamId:1}，'User'，{userId:2}]

意味着我们要为

团队

路由生成一个链接，该路由使用params

{teamId:1}

，子路由用户使用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>

---

很高兴它对您有效：）

语法在我的情况下有效：

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

---

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

我们可以使用两种方式，如/用户；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']"

---

您可以使用组件中的函数，通过使用routerLink和queryParams指令来获取动态URL和参数

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

---

试试

[router link]=“['/display details'，{id:display.id}]”

，顺便问一下，你用的是什么版本？@EricMartinez谢谢你！我用的是alpha.37。顺便说一句，你真的帮了我的忙，我想你已经回答了我所有的问题had@EricMartinez你想让它成为一个答案，这样我可以给你一个检查标记我更新了你的答案，以反映2.0测试版的API。我认为它仍然缺少两样东西。链接

/display details

应该是

/display details

，路由'as'参数已更改为'name'。我不得不使用字符串连接，如

，但这帮助我实现了大部分

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

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

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