Angular2中的路由变量答案

【问题标题】：Routing variable in Angular2Angular2中的路由变量
【发布时间】：2016-01-03 15:00:15
【问题描述】：

我已经阅读了新 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]

【问题讨论】：

试试[router-link]="['/display-details', {id: display.id}]"，顺便说一句，你用的是什么版本？
@EricMartinez 谢谢你！我正在使用 alpha.37。顺便说一句，你真的在 Angular2 上帮助了我，我想你已经回答了我所有的问题
@EricMartinez 你想让它成为一个答案，所以我可以打勾

标签： angular routing

【解决方案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 }
])

【讨论】：

【解决方案2】：

正如@ThreeAccents 建议的那样

引用文档RouterLink。

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

很高兴它对你有用:)

【讨论】：

我更新了您的答案以反映 API 为 2.0-beta 版。我认为它仍然缺少两件事。链接/display-details 应该是/DisplayDetails 并且路由'as' 参数已更改为'name'。
我不得不使用像 <a [routerLink]="['/display-details'+display.id]"> 这样的字符串连接，但这帮助我完成了大部分工作

【解决方案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']"

【讨论】：

【解决方案4】：

您可以使用组件中的函数通过 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>

在组件中：

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

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

【讨论】：