Angular 2 routerLinkActive

Question

Donc, je comprends comment utiliser RouterLink et RouterLinkActive dans le sens traditionnel. Il est assez facile de définir les classes à appliquer, mais j'étais curieux de savoir si vous pouviez utiliser RouterLinkActive pour afficher/masquer un élément.

<div class="btn-group btn-group-justified toggle-nav"> 
    <div class="btn-group"> 
    <button type="button" role="link" class="btn btn-default btn-lg" routerLink="/log-in" routerLinkActive="btn-primary text-bold">Sign In</button> 
    </div> 
</div> 

Je cherche à montrer une police icône impressionnante à côté du texte du bouton pour l'itinéraire sélectionné (il est un groupe de boutons). Merci d'avance pour votre aide. :]

Answer 1

Vous pouvez utiliser localRef et ajouter des classes en fonction de la valeur booléenne de l'état actif. Voici le petit extrait pour référence.

<li routerLinkActive #rla="routerLinkActive"> 
    <a [routerLink]="['/log-in']"> 
     Sign In 
     <i *ngIf="rla.isActive" class="fa fa-circle" aria-hidden="true"></i> 
    </a> 
</li> 

Lorsque l'itinéraire est adapté., Vous devriez voir un cercle noir en ligne avec le signe du texte., Espérons que cela résout votre problème.