Angular2中的路由变量

Question

我已经阅读了新 Angular 路由器的文档。他们用于路由到变量的示例是这样的：

Component/Module:

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

HTML/Template:

<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/Template:

<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

根据@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>

很高兴它对你有用:)

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

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']"

Answer 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 }; 
}

Angular2中的路由变量

Routing variable in Angular2

routing

angular