Pesquisa de site

javascript - Angular routerLink - qual é a sintaxe correta quando você quer adicionar texto extra à URL?

Olá, eu tenho um componente que gera links corretamente com a localização da URL href apropriada (observe [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>

Eu tenho outra rota configurada assim:

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

Então, o que estou tentando fazer é, no componente acima, vincular diretamente a esta rota/componente. Eu mudei a sintaxe [routerLink] para o que você vê abaixo e obtive esta URL http://localhost:4200/dashboard/my-cards/NaN

[routerLink]="card.id/edit"

Está claro que não posso atualizar o routerLink como fiz - isso é possível de fazer apenas via sintaxe no template? Ou devo ter um evento onclick para redirecionar conforme necessário?

Resposta #1

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

Resposta #2

Você pode definir seu routerLink da seguinte maneira

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

Artigos relacionados