Explication détaillée des étapes de mise en œuvre de la mise en évidence d'itinéraire angulaire

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 :

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 ? &#39;激活&#39; : &#39;未激活&#39;}}
</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!