Angular 2使用组件属性动态地设置routerLink

Question

我创建了一个组件，其中包含一个带有routerLink属性的元素，我想从使用该组件的模板中设置该元素。当我尝试这样做时，我得到错误消息'无法读取属性'未定义的路径'。

我的组件看起来link this:

info-box.component.ts

import { Input, Component } from "@angular/core";
import { ROUTER_DIRECTIVES } from "@angular/router";
@Component({
    selector: "info-box",
    template: require("./info-box.component.html"),
    directives: [
        ROUTER_DIRECTIVES
    ]
})
export class InfoBoxComponent {
    @Input() routerLink: string;
    @Input() imageUrl: string;
}

info-box.component.html

<a [routerLink]="[routerLink]"> 
    <img src="{{imageUrl}}" width="304" height="236">
</a>

并且使用组件的模板看起来是这样的:

<info-box [routerLink]="['/test']" [imageUrl]="['./testimage.jpg']"

如果我不添加routerLink，一切正常。我的路由器配置也似乎是正确的，因为当我直接添加到我的模板它也工作得很好。有人能帮我一下吗?

Grt马可

Answer 1

您可以使用如下代码在html中动态创建url:

例如，你在路由器中的路径是path:'destination/:id'，那么你可以这样使用routerLink:

<div *ngFor = "let item of items">
 <a routerLink = "/destination/{{item.id}}"></a>
</div>

Answer 2

在使用Angular 2.4和

时遇到这个问题的人

import { AppRoutingModule } from './app-routing.module';

在app.module.ts而不是ROUTER_DIRECTIVES，这是不再需要的，以下语法为我工作:

<a [routerLink]="['item', item.id ]">Item</a>

Answer 3

假设你的数组看起来像:

this.menuuItems = [
  {
    text: 'Tournament Setup',
    path: 'app-tournament'
  }];

现在在HTML中使用

<li *ngFor = "let menu of menuuItems">
     <span routerLink="/{{menu.path}}">
      <a>{{menu.text}}</a>
    </span>
    </li>