web-dev-qa-db-fra.com

Impossible de se lier à 'routerLink' car ce n'est pas une propriété connue de 'a'

Je mets à jour l'une de nos applications de rc4 vers angular2.0.0 et j'obtiens une erreur d'analyse de modèle au moment de l'exécution. Voici mon modèle de vue:

<div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
    <a [routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
        <div class="tile-icon">
            <span [className]="widget.IconCssClass"></span>
            <span *ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
        </div>
        <h4>{{widget.Text}}</h4>
    </a>
</div>

Et l'erreur est sur le lien du routeur. Voici l'erreur:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

    <div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
        <a [ERROR ->][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
            <di"): LdrComponent@4:19
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("tile-icon">
                <span [className]="widget.IconCssClass"></span>
                <span [ERROR ->]*ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
            </div>
     "): LdrComponent@7:22

Le routerLink ne me semble pas mal formé ... Qu'est-ce que j'ai fait de mal?

angularangular2-routing
18
cobolstinks

Le problème est que vous avez oublié d'ajouter RouterModule à votre composant NgModule. Dans le RC, cela a été ajouté à la @Component({directives: [ROUTER_DIRECTIVES]}), cependant, il est maintenant déplacé dans @NgModule({ imports: [RouterModule]}).

Lorsque vous définissez vos itinéraires, l'un des composants que vous importerez sera le RouterModule que vous utiliserez pour appeler forRoot ou forChild. Lorsque vous importez l'itinéraire, celui-ci sera importé automatiquement.

Ainsi, vous obtiendrez le RouterLink de cette façon, ou via l'importation directe dans la propriété imports de @NgModule.

32
Husein Roncevic

Une partie de la syntaxe a changé depuis rc-4, surtout si vous n'utilisiez pas le routeur 3.0.

Suivez la section RouterLink ici.

https://angular.io/docs/ts/latest/guide/router.html

Peu d'autres choses à vérifier sont la partie Configuration qui configure le fichier app.module.ts.

J'espère que cela vous mettra dans la bonne direction!

2
mrcolombo