Explication détaillée de la façon dont angulaire+RouterLinkActive implémente la fonction de mise en évidence d'itinéraire

Cette fois, je vous apporte une explication détaillée de la fonction de mise en évidence du routage à l'aide d'angular+RouterLinkActive. Quelles sont les précautions pour que angulaire+RouterLinkActive implémente la mise en évidence du routage ? cas pratique. Levez-vous et jetez un œil.

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.

La route actuelle est activée ou la route actuelle est dans l'état activé, ce qui signifie que la route dans l'url de la page et la route 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 :

login

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é.

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 site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour implémenter le composant PopupWindow

Comment utiliser jQuery pour réaliser l'électronique effet horloge

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!