Winkel 2 dynamisch festgelegt routerLink mit einer Komponente Eigenschaft

Erstellt habe ich eine Komponente enthält, die ein element mit einem routerLink Eigenschaft, die ich einstellen will aus einer Vorlage, der die Komponente verwendet. Wenn ich versuche, dies zu tun, erhalte ich die Fehlermeldung " kann Nicht Lesen der Eigenschaft 'path' undefined'.

Meine Komponente sieht der link:

info-box.Komponente.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>

Und der Vorlage, in dem die Komponente verwendet wird, sieht es wie folgt aus:

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

Wenn ich nicht fügen Sie die routerLink funktioniert alles einwandfrei. Meine router config als scheint Recht zu sein, weil wenn ich das direkt an meine Vorlage, es funktioniert auch einwandfrei. Kann mir jemand helfen mit diesem?

Grt Marco

Ähnlich sieht github.com/angular/angular/issues/9801

InformationsquelleAutor Marco | 2016-07-05

  1. 9

    können Sie code verwenden, wie dies für dynamisch erstellen die url im html -

    z.B. Wege in Ihrem router ist path:'destination/:id' dann können Sie routerLink wie diese

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

    ich hoffe, dass meine Antwort hilfreich

    hat funktioniert! vielen Dank!

    InformationsquelleAutor MostafaMashayekhi

  2. 4

    Für jeder, der dieses problem mit Hilfe von Winkel-2.4 in Verbindung mit

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

    in der app.module.ts statt ROUTER_DIRECTIVES, die nicht mehr benötigt wird, wird die folgende syntax für mich gearbeitet:

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

    InformationsquelleAutor mikeym

  3. 0

    angenommen, dein array sieht so aus :

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

    nun in Ihrer html-Anwendung wie 

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

    InformationsquelleAutor T. Shashwat

Schreibe einen Kommentar