Ich mag würde spezielle CSS-Stileigenschaften auf aktive Router Links gelten:CSS aktiven Router Link Nehmen [Angular 2]
<a [routerLink]='link'>{{name}}</a>Hier ist, was ich bisher versucht (mit dem Standard-Router-Link-aktiv-Klasse):
.router-link-active {
\t color: #000;
\t font-weight: bold;
}Es funktioniert nicht und ich verstehe wirklich nicht warum.
Derzeit Angular 2 hat eine built in attribute, die Sie auf einen beliebigen Link verwenden können, die mit [routerLink] verwendet wird routerLinkActive ist so alles, was Sie tun müssen, ist haben:
<a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>
und dann wird es erkennen, welchen Weg das ist aktuelle aktive Route und wenden Sie Ihre Router-Link-aktive Klasse an.
HINWEIS:
Für diejenigen, die andere Router auf Tags verwenden als a Tags, (persönlich verwende ich es auf eine Schaltfläche) routerLinkActive funktioniert nicht aber auf die nächste Version des Routers funktionieren sollte - https://github.com/angular/angular/issues/9755
das funktioniert gut, und wie kann ich einen boolean innerhalb meiner Komponente typescript-Klasse erhalten, die angibt, ob die Router-Verbindung aktiv ist oder nicht? – Platus
Also ... ist es, dass Sie nur wissen müssen, ob ein Element auf Ihrer Seite die Router-Link-Active-Klasse hat? oder versuchen Sie herauszufinden, welche Route gerade aktiv ist? –
Ich möchte herausfinden, welche Route gerade aktiv ist, tatsächlich habe ich einen einzelnen Router-Link in einer Vorlage einer TabComponent und ich generiere dann viele Router-Links mit * ngFor in einer übergeordneten Komponente – Platus
Ohne etwas zu wissen mehr, das ist die Richtung, die ich in dir zeigen würde.
<a [routerLink]='link' [ngClass]="{'router-link-active': routerLink.something === something}">{{name}}</a>Wenn routerLink.something === something, oder was auch immer Ausdruck, den Sie möchten, als wahr ausgewertet, die Klasse (und Styling) Wird angewendet werden.
Der neue Router verfügt über eine Richtlinie "routerLinkActive" genannt, die in ihrem Interesse ist, was.
Ex. <a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a>
"Wenn die URL entweder '/ user' oder '/ user/bob' ist, wird die Active-Link-Klasse zum a-Tag hinzugefügt. Wenn sich die URL ändert, wird die Klasse entfernt."
Ich glaube nicht, dass es tatsächlich ein Duplikat ist; die andere Frage war für Angular 1, während dies angular2 ist, und der Router von angular2 ist mehrere Versionen, die aus angular1 entfernt wurden. –