8

コンポーネントを使用するテンプレートから設定したい routerLink プロパティを持つ要素を含むコンポーネントを作成しました。これを実行しようとすると、「未定義のプロパティ 'パス' を読み取れません」というエラー メッセージが表示されます。

私のコンポーネントはこれにリンクしています：

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 マルコ

4

3 に答える 3

15

このようなコードを html の動的作成 URL に使用できます。

たとえば、ルーターのパスは次のようpath:'destination/:id'に使用できます。routerLink

<div *ngFor = "let item of items">
 <a routerLink = "/destination/{{item.id}}"></a>
</div>
于 2016-12-27T08:28:26.997 に答える
6

Angular 2.4と組み合わせて使用​​ してこの問題を抱えている人のために

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

のapp.module.ts代わりにROUTER_DIRECTIVES、不要になったので、次の構文が機能しました。

<a [routerLink]="['item', item.id ]">Item</a>
于 2016-12-27T23:00:34.430 に答える