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 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// 用法概览 @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>
Wie füge ich zwei Klassen hinzu?
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a> login
routerLinkActive
Code kopieren Der Code lautet wie folgt:
loginSie 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>
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>
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!