Angulaire 2 définir dynamiquement routerLink à l'aide de la propriété d'un composant

J'ai créé un composant qui contient un élément avec un routerLink bien qui je veux à partir d'un modèle qui utilise le composant. Lorsque j'essaie de faire cela, j'obtiens le message d'erreur " Impossible de lire la propriété 'chemin' undefined'.

Mon composant regarde ce lien:

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

Et et le modèle où le composant est utilisé, il ressemble à ceci:

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

Si je ne suis pas d'ajouter le routerLink tout fonctionne bien. Mon routeur config sla semble être de droite parce que quand j'ajoute directement à mon modèle, il fonctionne aussi très bien. Quelqu'un peut-il m'aider?

Théorie De La Relativité Générale Marco

Ressemble à github.com/angular/angular/issues/9801

OriginalL'auteur Marco | 2016-07-05

  1. 9

    vous pouvez utiliser ce type de code dynamique pour créer des url en html

    par exemple votre chemin dans le routeur est path:'destination/:id' ensuite, vous pouvez utiliser routerLink comme ce

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

    j'espère que ma réponse utile

    travaillé! merci beaucoup!

    OriginalL'auteur MostafaMashayekhi

  2. 4

    Pour toute personne ayant ce problème en utilisant Angulaire 2.4 en conjonction avec

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

    dans le app.module.ts au lieu de ROUTER_DIRECTIVES, qui n'est plus nécessaire, la syntaxe suivante a fonctionné pour moi:

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

    OriginalL'auteur mikeym

  3. 0

    supposons que votre tableau ressemble :

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

    maintenant dans votre code html à utiliser comme 

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

    OriginalL'auteur T. Shashwat