Detaillierte Erläuterung der Implementierungsschritte der Winkelroutenhervorhebung

Dieses Mal werde ich Ihnen die Implementierungsschritte der Winkel-Routing-Hervorhebung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung der Winkel-Routing-Hervorhebung? Werfen wir einen Blick darauf.

Was ist Routenhervorhebung? Was sind die Vorteile?

Wenn Sie an einem Backend-Verwaltungssystem arbeiten, gibt es auf der linken Seite eine Reihe von Routen

Navigation Klicken Sie hier, um verschiedene Seiten aufzurufen „located“ fügt einen Stil hinzu, der den aktuellen Standort anzeigt.

Aber wenn Sie sich auffrischen, werden Sie feststellen, dass dieser Stil verschwunden ist...

Was soll ich tun?

Routenhervorhebung übernehmen: Wenn die Route aktiviert ist, können Sie dem Dom-Element, in dem Sie die Route hinzufügen, eine Klasse hinzufügen. Dieser Stil wird nur entfernt, wenn sich die URL ändert.

Die aktuelle Route ist aktiviert oder die aktuelle Route befindet sich im aktivierten

Zustand Zeigt an, dass die Route in der URL der Seite und die Route im aktuellen Dom-Tag übereinstimmen möchten.

// 用法概览
@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
}

Beispiel

.red{
  color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

Wenn die URL user oder /user/login ist, wird ein Tag mit classred hinzugefügt. Wenn sich die URL in etwas anderes ändert, wird die Klasse entfernt.

Wie füge ich zwei Klassen hinzu?

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

Zwei Möglichkeiten, routerLinkActive zu schreiben

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
login

Sie können auch Parameter für

routerLinkActive

Pass Exact: True konfigurieren, um hervorzuheben, wenn die Route vollständig übereinstimmt. Beispiel:

Code kopieren Der Code lautet wie folgt:

8ade86326de2df797705617d4ea038d6login5db79b134e9f6b82c0b36e0489ee08ed

Sie können isActive auch verwenden, um zu überprüfen, ob die Route derzeit aktiv ist

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? &#39;激活&#39; : &#39;未激活&#39;}}
</a>

Wenn die aktuelle Route aktiv ist, wird Folgendes angezeigt: Login aktiviert

Inaktiver Zustand

Login inaktiv

Das obige RLA ist die Abkürzung für routerLinkActive, die beiläufig definiert werden kann.

Hier kommt der wichtige Punkt: Sie können die RouterLinkActive-Direktive für das übergeordnete Element verwenden, indem Sie das routerLink-Element verwenden.

Ist es mühsam, jeder Route separat Stile hinzuzufügen? Das Hinzufügen eines Routenhervorhebungsbefehls zu seinem übergeordneten Element kann das Problem lösen!

<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</p>

Fügen Sie einfach routerLinkActive und routerLinkActiveOptions zum übergeordneten Element p des a-Tags hinzu. Wenn die Route /user/login oder /user/reset ist, wird der rote Stil dem dom-Element hinzugefügt, in dem er sich befindet . Hier ist zu beachten, dass routerLinkActiveOptions hinzugefügt werden muss, um eine vollständige Übereinstimmung anzugeben. Andernfalls werden beide Routen abgeglichen und der rote Stil hinzugefügt.

Weitere API-Verwendungen werden auf Github aktualisiert

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

Eine Zusammenfassung der Angular5-Routing-Wertübertragungsmethoden

JS zum Erstellen von Falt- und Entfaltungsanimationen (mit Code)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsschritte der Winkelroutenhervorhebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!