web-dev-qa-db-ja.com

Angular 2コンポーネントプロパティを使用してrouterLinkを動的に設定

コンポーネントを使用するテンプレートから設定したい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マルコ

javascriptangularangular2-routingangular2-templateangular2-components
7
Marco

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

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

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

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

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

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

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

配列が次のようになっているとします。

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>
1
T. Shashwat