Bonjour, j'ai un composant qui génère des liens correctement avec l'emplacement d'URL href approprié (remarque [routerLink]="card.id", http://localhost:4200/dashboard/my-cards/DmJHJJA1e77fEEImKBju):

        <a
            *ngFor="let card of cards; let i = index"
            class="list-group-item list-group-item-action d-flex flex-row align-items-start justify-content-between"
            [routerLink]="card.id"
            routerLinkActive="active"
        >
            <div class="d-flex flex-column card-info-container">
                <h4 class="list-group-item-heading">{{card.name}}</h4>
                <p class="mb-1">{{card.description}}</p>
            </div>
            <img [src]="card.imagePath" alt="" class="img-responsive" style="max-width: 50px;">
        </a>

J'ai un autre itinéraire configuré comme celui-ci:

{
    path: ':id/edit',
    component: CardEditComponent,
    canActivate: [AuthGuardService]
}

Donc, ce que j'essaie de faire, c'est dans la balise de composant ci-dessus est un lien direct vers cette route / composant. J'ai changé la syntaxe [routerLink] en ce que vous voyez ci-dessous et j'ai obtenu cette URL http://localhost:4200/dashboard/my-cards/NaN

[routerLink]="card.id/edit"

Il est clair que je ne peux pas mettre à jour routerLink comme je l'ai fait - est-ce possible de le faire via la syntaxe dans le modèle uniquement? Ou dois-je avoir un événement onclick pour rediriger au besoin?

4
Pippy Longstocking 14 avril 2018 à 22:59

3 réponses

Meilleure réponse

Essayez routerLink = "{{card.id}}/edit"

3
Fateme Fazli 14 avril 2018 à 20:15

Vous pouvez définir votre routerLink comme suit

[routerLink]="[card.id, 'edit']"

2
Bunyamin Coskuner 14 avril 2018 à 20:03

Si vous passez des paramètres d'itinéraire, vous devez d'abord avoir le nom de l'itinéraire, puis les paramètres comme ['routeName', paramètre ..]

Mais ici, puisque le nom de l'itinéraire lui-même inclut le paramètre, vous devez concaténer les deux et l'utiliser comme chaîne.

[routerLink] = [ {{card. Id}} + '/edit']

0
NitinSingh 15 avril 2018 à 04:12