Angular - Appliquer le style à un élément en fonction de son frère RouterLinkActive ?

Question

Je n'ai pas qu'une seule barre de menu dans mon application qui doit être peinte lorsque l'utilisateur navigue, j'ai aussi d'autres composants qui doivent être peints également. Puis-je y parvenir en utilisant simplement routerLinkActive ?

menu.html

<menu>
  <a routerLink="page1" routerLinkActive="active">
      option1
  </a>
  <a routerLink="page2" routerLinkActive="active">
      option2
  </a>
</menu>

Ce menu fonctionne très bien. Mais ce que je demande, c'est comment tirer parti de la propriété routerLinkActive placée dans d'autres balises HTML, par exemple :

principal.html

<main>
    <span class="title" routerLinkActive="active">My sub child part</span>
</main>

Answer 1

Vous pourriez lier l'état de la routerLinkActive pour déterminer si une classe est appliquée ou non à un élément, comme suit :

<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>

.active-span {
 background-color: red;
}

#rla est un variable de modèle Vous trouverez plus d'informations sur ce cas d'utilisation dans la rubrique RouterLinkActive dans la directive les docs

Answer 2

vous pouvez appliquer la règle RouterLinkActive di RouterLink.

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

Plus de détails aquí .

J'espère que cela vous aidera !