Je développe un composant Breadcrumb dans Angular qui affichera l'adresse complète sur le routage. Aider l'utilisateur à revenir à n'importe quelle étape avant. Pour obtenir l'URL réelle, j'utilise ActivatedRoute. Ça fonctionne bien.

Ma question concerne la définition d'une classe différente sur le dernier élément en utilisant cet exemple de style de Breadcrumb . (Bootstrap 4) Qui montre un style différent sur le dernier élément du routage. (Données utilisant active et aria-current="page")

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="/library">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav> 

Pour obtenir le dernier élément de la liste et définir une classe CSS différente, j'utilise cet exemple :

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li> 

Mais je n'arrive pas à atteindre l'objectif d'activer class="active" et aria-current="page" en utilisant le fichier css qui ressemble à :

.last{
  // I do not know how to enable from here active and arria-current
}
0
JoseJimRin 25 nov. 2019 à 12:10

1 réponse

Meilleure réponse

Enfin j'ai réussi. Il n'est pas nécessaire d'utiliser la classe active.

En utilisant pointer-event, vous pouvez désactiver l'option permettant de cliquer sur le lien à l'aide de la classe CSS.

HTML

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li>

CSS

.last a{
    color: grey;
    pointer-events: none;
}
0
JoseJimRin 27 nov. 2019 à 13:42