Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-15 09:48:28
original
2087 Les gens l'ont consulté

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
}
Copier après la connexion

Exemple

.red{
  color: red;
}
Copier après la connexion
<a routerLink="/user/login" routerLinkActive="red">login</a>
Copier après la connexion

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>
Copier après la connexion

Deux façons d'écrire routerLinkActive

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
login
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!