コンポーネントのプロパティを使用して角2動的に設定されたrouterLink

Question

コンポーネントを使用するテンプレートから設定するrouterLinkプロパティを持つ要素を含むコンポーネントを作成しました。私がこれをしようとすると、私はエラーメッセージ '不定のプロパティ'パス 'を読み取ることができません。

私のコンポーネントは、リンクにこのなります

情報-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; 
} 

情報-box.component.html

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

そして、コンポーネントがあるテンプレートをそれは次のようになります：

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

routerLinkを追加しないとすべて正常に動作します。自分のテンプレートに直接追加するとうまく動作するので、私のルータの設定は正しいようです。誰もこれで私を助けることができますか？

ザクロマルコ

Answer 1

あなたがHTMLに動的に作成したURLのために、このようなコードを使用することができますルータのパスがpath:'destination/:id'は、あなたが、私は願っています。この

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

ようrouterLinkを使用することができますです例えば

私の答えが有用

Answer 2

Angular 2.4を

不要になった代わりに ROUTER_DIRECTIVESの app.module.ts、中

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

は、次の構文は、私の仕事：

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