Detaillierte Erläuterung, wie Angular+RouterLinkActive die Routenhervorhebungsfunktion implementiert

Dieses Mal erkläre ich Ihnen ausführlich die Routing-Hervorhebungsfunktion mit Angular+RouterLinkActive. Was sind die Vorsichtsmaßnahmen für die Routing-Hervorhebung? Praktischer Koffer. Stehen Sie auf und werfen Sie 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, was bedeutet, 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:

login

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 ? '激活' : '未激活'}}
</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.

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue verwendet, um die PopupWindow-Komponente zu implementieren

Wie man jQuery bedient, um die Elektronik zu erreichen Uhreffekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie Angular+RouterLinkActive die Routenhervorhebungsfunktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!