web-dev-qa-db-fra.com

Angular 2 définir de manière dynamique routerLink à l'aide d'une propriété de composant

J'ai créé un composant contenant un élément avec une propriété routerLink que je souhaite définir à partir d'un modèle utilisant ce composant. Lorsque j'essaie de le faire, j'obtiens le message d'erreur "Impossible de lire la propriété" chemin "de non définie".

Mon composant semble lier ceci:

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>

Et le modèle dans lequel le composant est utilisé a l'aspect suivant:

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

Si je n'ajoute pas le routerLink, tout fonctionne bien. Les configurations de mon routeur semblent être correctes, car lorsque je les ajoute directement à mon modèle, elles fonctionnent également correctement. Est-ce que quelqu'un peut m'aider avec ça?

Grt Marco

javascriptangularangular2-routingangular2-templateangular2-components
6
Marco

vous pouvez utiliser un code comme celui-ci pour créer des URL dynamiques en HTML

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

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

j'espère que ma réponse est utile

9
MostafaMashayekhi

Pour ceux qui ont ce problème, utilisez Angular 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>
4
mikeym

supposons que votre tableau ressemble à:

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

maintenant dans votre utilisation html comme 

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