Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre de la mise en évidence du routage angulaire Quelles sont les précautions pour mettre en œuvre la mise en évidence du routage angulaire ? Jetons un coup d'oeil.
Qu'est-ce que la mise en évidence d'itinéraire ? Quels sont les avantages ?
Lorsque vous travaillez sur un système de gestion backend, il y a une rangée de routes sur la gauche Navigation Cliquez pour entrer dans différentes pages. Puis l'élément dom où se trouve cette route. localisé ajoutera un style pour indiquer l'emplacement actuel.
Mais lorsque vous rafraîchirez, vous constaterez que ce style a disparu...
Que dois-je faire ?
Adopter la mise en évidence de la route : Lorsque la route est activée, cela vous permet d'ajouter une classe sur l'élément dom où vous ajoutez la route. Ce style ne sera supprimé que lorsque l'url change.
L'itinéraire actuel est activé ou l'itinéraire actuel est dans l'état activé Indique que l'itinéraire dans l'url de la page et l'itinéraire dans la balise dom actuelle veulent correspondre.
// 用法概览 @Directive({ selector: '[routerLinkActive]', exportAs: 'routerLinkActive' }) class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef) links: QueryList<RouterLink> linksWithHrefs: QueryList<RouterLinkWithHref> get isActive: boolean routerLinkActiveOptions: {...} set routerLinkActive: string[] | string ngAfterContentInit(): void ngOnChanges(changes: SimpleChanges): void ngOnDestroy(): void }
Exemple
.red{ color: red; }
<a routerLink="/user/login" routerLinkActive="red">login</a>
Lorsque l'url est user ou /user/login, la balise a sera ajoutée avec classred. Lorsque l’URL devient autre chose, la classe sera supprimée.
Comment ajouter deux classes ?
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
Deux façons d'écrire routerLinkActive
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a> login
Vous pouvez également configurer les paramètres pour routerLinkActive
Pass exact: true pour indiquer que l'itinéraire correspond complètement à mettre en évidence, comme
Copier le code Le code est le suivant :
Vous pouvez également utiliser isActive pour vérifier si l'itinéraire est actuellement actif
<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive"> login {{ rla.isActive ? '激活' : '未激活'}} </a>
Si l'itinéraire actuel est actif, il sera affiché : connexion activée
état inactif
connexion inactive
Le rla ci-dessus est l'abréviation de routerLinkActive, qui peut être défini à volonté.
Voici le point important : vous pouvez utiliser la directive RouterLinkActive sur l'élément parent en utilisant l'élément routerLink
Est-il gênant d'ajouter des styles à chaque route séparément ? L'ajout d'une commande de mise en évidence d'itinéraire à son élément parent peut résoudre le problème !
<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}"> <a routerLink="/user/login">login</a> <a routerLink="/user/reset">reset</a> </p>
Ajoutez simplement routerLinkActive et routerLinkActiveOptions à l'élément parent p de la balise a Lorsque la route est /user/login ou /user/reset, le style rouge est ajouté à l'élément dom où il se trouve. situé. Ce qu'il faut noter ici, c'est ajouter routerLinkActiveOptions pour spécifier une correspondance complète. Sinon, lorsque l'URL est utilisateur, les deux routes correspondront et le style rouge sera ajouté.
D'autres utilisations de l'API sont mises à jour sur github
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois PHP. site web!
Lecture recommandée :
Un résumé des méthodes de transfert de valeur de routage Angular5
JS pour réaliser une animation de pliage et de dépliage (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!