J'essaie d'appliquer ou de mettre en évidence des itinéraires de navigation pour ma barre de menus avec le code ci-dessous, ce que j'ai pu obtenir, c'est que je pourrais mettre en évidence le sous-menu, mais je n'ai pas pu mettre en surbrillance la barre de menus parent.
.class1{
background-color: #007bff;
}
3 Réponses :
Vous pouvez utiliser la variable de référence de modèle ( # ) pour obtenir une référence à routerLinkActive et ses propriétés, puis utiliser isActive .
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
style="color: white; cursor: pointer;"
[ngClass]="{'class1': child1RLA.isActive || child2RLA.isActive}"> <!-- <-- Check if child routes are active -->
Parent
</a>
<div class="dropdown-menu dropdown-menu-left"
aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item"
[routerLink]="['app-child1']"
[routerLinkActive]="['class1']"
#child1RLA="routerLinkActive"> <!-- <-- Assign routerLinkActive reference to child1RLA variable -->
Child 1
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
[routerLink]="['app-child2']"
[routerLinkActive]="['class1']"
#child2RLA="routerLinkActive"> <!-- <-- Assign routerLinkActive reference to child2RLA variable -->
Child 2
</a>
</div>
</div>
</li>
Quoi? Ce n'est pas un "id angulaire". C'est une variable de référence de modèle. Comment pouvez-vous alors utiliser exportAs des directives? Et comment puis-je utiliser cette méthode exacte dans mon projet alors?
stackoverflow.com/questions/49746274/...
ce n'est pas une directive? et probablement pour la même raison que les gens utilisent jquery dans des projets angulaires. ce n'est pas parce que vous pouvez faire quelque chose que vous devriez
Qu'entendez-vous par «pas une directive»? RouterLinkActive est une directive et contient exportAs: ' routerLinkActive ' que vous pouvez utiliser pour accéder à ses propriétés spécifiques à la directive. Lisez les exemples dans la documentation officielle.
Je n'ai jamais dit que RouterLinkActive n'était pas une directive, j'ai dit que # ..... n'est pas une directive, c'est un identifiant
As-tu lu ce que j'ai écrit? J'ai dit: ce n'est pas un "id angulaire". C'est une variable de référence de modèle. Quand ai-je dit que # ... est une directive. C'est une référence à une directive. Je vous demande de bien vouloir révoquer le vote défavorable car vous vous trompez totalement dans cette situation. Ce que j'offre dans la réponse est une utilisation valide à 100% .
mais comme # ... ne peut pas être dupliqué dans le même fichier html, c'est donc aussi un identifiant valide. comment êtes-vous certain que je suis le downvoter? et si vous lisez l'info-bulle, le vote est pour l'utilité, pas pour savoir si la réponse est considérée comme correcte ou non
Ce n'est pas dupliqué. # child1RLA et # child2RLA sont-ils dupliqués? Par souci d'utilité, j'utilise déjà cette méthode pour structurer mon menu principal dans mes projets. Peu importe ... J'en ai fini avec cette conversation.
Je n'ai pas dit qu'ils sont dupliqués, je viens de dire qu'ils ne peuvent pas être dupliqués et qu'ils sont également valablement utilisés comme identifiants. et pour moi, ses gens comme toi qui le ruinent à cause de mauvaises réponses
il suffit de mettre le routerLinkActive sur l'élément parent, comme décrit ici: https: // angular. io / api / router / RouterLinkActive # description
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/jim">Jim</a>
<a routerLink="/user/bob">Bob</a>
</div>
Pour mettre en évidence un lien de menu latéral, ajoutez simplement routerLinkActive = "cssClassName" aux éléments d'ancrage comme:
<a routerLink="/profile" routerLinkActive="cssClassName"
[routerLinkActiveOptions]="{ exact: true }">Profile</a>
cela mettra en évidence les deux liens si la route devient / profile ou / profile / details
Si vous ne voulez pas mettre en évidence la route parente lorsque l'utilisateur sélectionne les détails du profil dans ce cas, ajoutez simplement un attribut supplémentaire à la route parente, à savoir 'routerLinkActiveOptions' comme suit:
<a routerLink="/profile" routerLinkActive="cssClassName">Profile</a> <a routerLink="/profile/details" routerLinkActive="cssClassName">Profile Details</a>
C'est le moyen le plus simple de mettre en évidence les liens du menu latéral lorsque le devient activé.
où appliquez-vous la classe
class1?vous pouvez vérifier l'itinéraire actif? puis appliquer la classe en conséquence?