angular - 如何正确使用带有模型变量的“routerLink”

Question

尝试从绑定到模板类的数据中绑定 routerLink。根据 angular.io 文档，模板语法似乎是正确的。在应用程序和组件级别都尝试过 ROUTER_PROVIDERS 和 ROUTER_BINDINGS （两者仍然是一个谜），但无济于事。我的代码抛出“有帮助的”错误：TypeError: linkParams.reduce is not a function in [[ 'ClassDetail', {id: class._id} ] in ]

模板：

<div class="container" >
  <div class="row">
    <div class="col-md-4 block" *ngFor="#class of classes | async">
      <h2>{{class.title}}</h2>
      <p>{{class.description}}</p>
      <p><a class="btn btn-default" routerLink="[ 'ClassDetail', {id: class._id} ]" role="button">View details &raquo;</a></p>
    </div>
  </div>
</div>

如果没有 routerLink' 这会很好。

路线配置：

@RouteConfig([
  { path: '/', component: Home, name: 'Index' },
  { path: '/home', component: Home, name: 'Home' },
  { path: '/about', component: AboutComponent, name: 'About' },
  { path: '/classes/:id', component: ClassDetailComponent, name: 'ClassDetail'}
])

Answer 1

你应该使用类似的东西；

<p>
  <a class="btn btn-default"
     [routerLink]="[ 'ClassDetail', {id: class._id} ]" role="button">
    View details &raquo;
  </a>
</p>

事实上router-link是 Angular2 中的一个指令。请参阅文档中的此链接 。

它必须配置有可绑定输入（这就是您需要添加直括号的原因）。这允许为指令提供参数。有关更多信息，请参阅属性指令文档中的“使用绑定配置指令”部分：https ://angular.io/docs/ts/latest/guide/attribute-directives.html 。

希望它可以帮助你，蒂埃里