HINWEIS: Hier gibt es viele verschiedene Antworten, und die meisten waren zu der einen oder anderen Zeit gültig. Tatsache ist, dass sich das, was funktioniert, mehrmals geändert hat, als das Angular-Team seinen Router geändert hat. Die Router 3.0-Version, die später der Router in Angular sein wird, bricht viele dieser Lösungen, bietet jedoch eine sehr einfache eigene Lösung. Ab RC.3 ist die bevorzugte Lösung die Verwendung [routerLinkActive]
wie in dieser Antwort gezeigt .
Wie bestimmen Sie in einer Angular-Anwendung (aktuell in der Version 2.0.0-beta.0, während ich dies schreibe), welche Route derzeit aktiv ist?
Ich arbeite an einer App, die Bootstrap 4 verwendet, und ich brauche eine Möglichkeit, Navigationslinks / -schaltflächen als aktiv zu markieren, wenn die zugehörige Komponente in einem <router-output>
Tag angezeigt wird .
Mir ist klar, dass ich den Status selbst beibehalten könnte, wenn auf eine der Schaltflächen geklickt wird, aber das würde nicht den Fall abdecken, dass mehrere Pfade auf derselben Route liegen (z. B. ein Hauptnavigationsmenü sowie ein lokales Menü in der Hauptkomponente ).
Anregungen oder Links wäre dankbar. Vielen Dank.
quelle
@input
for-Option,exact: false
aktiviert jedoch die Klasse, wenn auch die Geschwister der aktuellen Route aktiv sind.router.navigate()
das gut funktionieren würde.routerLinkActive
ist lediglich ein Indikator dafür, ob dieser Link die aktive Route darstellt.Ich habe dies in einer anderen Frage beantwortet, aber ich glaube, dass es auch für diese relevant sein könnte. Hier ist ein Link zur ursprünglichen Antwort: Winkel 2: Wie bestimme ich die aktive Route mit Parametern?
Ich habe versucht, die aktive Klasse festzulegen, ohne genau wissen zu müssen, wo sich der aktuelle Standort befindet (unter Verwendung des Routennamens) . Die beste Lösung, die ich bisher gefunden habe, ist die Verwendung der in der Klasse verfügbaren Funktion isRouteActive
Router
.router.isRouteActive(instruction): Boolean
Nimmt einen Parameter, der einInstruction
Routenobjekt ist, und gibt zurück,true
oderfalse
ob diese Anweisung für die aktuelle Route wahr ist oder nicht. Sie können eine RouteInstruction
mithilfe vonRouter
' generieren generieren (linkParams: Array) . LinkParams folgt genau demselben Format wie ein Wert, der an eine routerLink- Direktive (zrouter.isRouteActive(router.generate(['/User', { user: user.id }]))
. B. ) übergeben wird.So könnte die RouteConfig aussehen (ich habe sie ein wenig optimiert, um die Verwendung von Parametern zu zeigen) :
Und die Ansicht würde so aussehen:
Dies war bisher meine bevorzugte Lösung für das Problem, es könnte auch für Sie hilfreich sein.
quelle
router.isRouteActive('Home')
.Router
in Klasse Konstruktorname
anstelle desas
Routerkonfigurationsobjekts verwendet.router.urlTree.contains(router.createUrlTree(['Home']))
Ich habe ein Problem gelöst, auf das ich in diesem Link gestoßen bin, und finde heraus, dass es eine einfache Lösung für Ihre Frage gibt. Sie können
router-link-active
stattdessen in Ihren Stilen verwenden.quelle
router-link-active
Klasse wird nicht zum aktivena
oder hinzugefügtli
. Aber es gibt einen Ort, an dem ich Bootstrap benutzenav-tabs
und der dort funktioniert.Kleine Verbesserung der Antwort von @ alex-corria-santos basierend auf https://github.com/angular/angular/pull/6407#issuecomment-190179875
Und benutze es so:
quelle
styles : [
.active {Hintergrundfarbe: aliceblue; }]
. +1 es funktioniertSie können die aktuelle Route überprüfen, indem Sie das
Location
Objekt in Ihren Controller einfügen und Folgendes überprüfenpath()
:Sie müssen sicherstellen, dass Sie es zuerst importieren:
Sie können dann einen regulären Ausdruck verwenden, um den zurückgegebenen Pfad abzugleichen und festzustellen, welche Route aktiv ist. Beachten Sie, dass die
Location
Klasse einen normalisierten Pfad zurückgibt, unabhängig davon, welchenLocationStrategy
Sie verwenden. Also selbst wenn Sie die verwendenHashLocationStragegy
die Pfade zurückgekehrt wird noch von der Form/foo/bar
nicht#/foo/bar
quelle
UPDATE: aktualisiert gemäß Angular2.4.x
Mehr sehen...
quelle
Zum Markieren können aktive Routen
routerLinkActive
verwendet werdenDies funktioniert auch bei anderen Elementen wie
Wenn Teilübereinstimmungen ebenfalls markiert werden sollen, verwenden Sie
Soweit ich weiß,
exact: false
wird dies die Standardeinstellung in RC.4 seinquelle
Im Moment benutze ich rc.4 mit Bootstrap 4 und dieses funktioniert perfekt für mich:
Dies funktioniert für url: / home
quelle
/home/whatever
?exact
meine, diese Route wird denselben Namen haben. Und dies ist erforderlich, wenn Sie es mit Tools wie Twitter Bootstrap verwenden möchten. Es verarbeitet bereits den aktiven Verbindungsstatus undexact
funktioniert ohne Option nicht. (nicht sicher, wie es im Kern funktioniert, ich habe es versucht und es funktioniert für mich)Im Folgenden finden Sie die Methode, mit der RouteData verwendet wird, um Menüleistenelemente abhängig von der aktuellen Route zu formatieren:
RouteConfig enthält Daten mit Registerkarte (aktuelle Route):
Ein Stück Layout:
Klasse:
quelle
Ich dachte nur, ich würde in einem Beispiel hinzufügen, das kein Typoskript verwendet:
Die
routerLinkActive
Variable wird an eine Vorlagenvariable gebunden und bei Bedarf wiederverwendet. Leider ist die einzige Einschränkung, dass Sie nicht alles auf dem<section>
Element haben können, da#home
es vor dem Parser-Treffer behoben werden muss<section>
.quelle
Router
in Angular 2 definiert RC nicht mehrisRouteActive
undgenerate
Methoden.Versuchen Sie Folgendes
Beachten Sie,
routeSegment : RouteSegment
muss in den Konstruktor der Komponente eingefügt werden.quelle
Hier ist ein vollständiges Beispiel für das Hinzufügen eines aktiven Routenstils in der Angular-Version, bei
2.0.0-rc.1
dem Null-Root-Pfade berücksichtigt werden (zpath: '/'
)app.component.ts -> Routen
app.component.html
quelle
Lösung für Angular2 RC 4:
quelle
Ab Angular 8 funktioniert dies:
{ exact: true }
stellt sicher, dass es mit der URL übereinstimmt.quelle
Wenn Sie im Jahr 2020 eine aktive Klasse für ein Element festlegen möchten, das keinen [routerLink] enthält, können Sie einfach Folgendes tun:
quelle
Eine weitere Problemumgehung. Viel einfacher in Angular Router V3 Alpha. durch Injektion von Router
Verwendung
quelle
In Angular2 RC2 können Sie diese einfache Implementierung verwenden
Dadurch wird
active
dem Element eine Klasse mit übereinstimmender URL hinzugefügt. Weitere Informationen finden Sie hierquelle
Nachfolgend finden Sie die Antworten auf diese Frage für alle bisher veröffentlichten Versionen von Angular 2 RC-Versionen:
RC4 und RC3 :
Zum Anwenden der Klasse auf einen Link oder einen Vorfahren des Links:
/ home sollte die URL und nicht der Name der Route sein, da die Name-Eigenschaft ab Route v3 nicht mehr auf dem Routenobjekt vorhanden ist.
Weitere Informationen zur routerLinkActive-Direktive finden Sie unter diesem Link .
Zum Anwenden der Klasse auf ein Div basierend auf der aktuellen Route:
z.B
RC2 und RC1 :
Verwenden Sie eine Kombination aus router.isRouteActive und class. *. zB um eine aktive Klasse basierend auf der Home Route anzuwenden.
Name und URL können beide an router.generate übergeben werden.
quelle
Die Verwendung
routerLinkActive
ist in einfachen Fällen gut, wenn ein Link vorhanden ist und Sie einige Klassen anwenden möchten. In komplexeren Fällen, in denen Sie möglicherweise keinen RouterLink haben oder etwas mehr benötigen, können Sie eine Pipe erstellen und verwenden :dann:
und vergiss nicht, Pipe in die Pipes-Abhängigkeiten aufzunehmen;)
quelle
containsTree
definiert?Für Angular Version 4+ müssen Sie keine komplexe Lösung verwenden. Sie können einfach verwenden
[routerLinkActive]="'is-active'"
.Ein Beispiel mit einem Bootstrap 4-Navigationslink:
quelle
Eine Instanz der Router-Klasse ist tatsächlich eine Observable und gibt bei jeder Änderung den aktuellen Pfad zurück. So mache ich es:
Und dann in meinem HTML:
quelle
Wie in einem der Kommentare der akzeptierten Antwort erwähnt, kann die
routerLinkActive
Direktive auch auf einen Container des tatsächlichen<a>
Tags angewendet werden .So zum Beispiel bei Twitter Bootstrap-Registerkarten, auf denen die aktive Klasse auf das
<li>
Tag angewendet werden soll , das den Link enthält:Ziemlich ordentlich! Ich nehme an, die Direktive überprüft den Inhalt des Tags und sucht nach einem
<a>
Tag mit derrouterLink
Direktive.quelle
Einfache Lösung für Winkel 5 Benutzer ist, einfach hinzufügen
routerLinkActive
zum Listenelement .Eine
routerLinkActive
Direktive ist einer Route durch a zugeordnetrouterLink
Direktive zugeordnet.Als Eingabe wird ein Array von Klassen verwendet, die dem Element hinzugefügt werden, an das es angehängt ist, wenn die Route derzeit aktiv ist.
Mit dem obigen Befehl wird dem Ankertag eine aktive Klasse hinzugefügt, wenn derzeit die Heimatroute angezeigt wird.
quelle
Und in der neuesten Version von Angular können Sie einfach überprüfen
router.isActive(routeNameAsString)
. Siehe zum Beispiel das folgende Beispiel:Und stellen Sie sicher, dass Sie nicht vergessen, den Router in Ihre Komponente einzuspritzen.
quelle
Ich suchte nach einer Möglichkeit, ein Twitter-Bootstrap-Navi mit Angular2 zu verwenden, hatte jedoch Probleme, das zu erhalten
active
Klasse auf das übergeordnete Element des ausgewählten Links anzuwenden. Gefunden, dass die Lösung von @ alex-corria-santos perfekt funktioniert!Die Komponente, die Ihre Registerkarten enthält, muss den Router importieren und in seinem Konstruktor definieren, bevor Sie die erforderlichen Aufrufe tätigen können.
Hier ist eine vereinfachte Version meiner Implementierung ...
quelle
Angenommen, Sie möchten meinem aktiven Status / Tab CSS hinzufügen. Verwenden Sie routerLinkActive , um Ihre Routing-Verbindung zu aktivieren.
Hinweis: 'aktiv' ist hier mein Klassenname
quelle
Ich verwende einen Winkelrouter
^3.4.7
und habe immer noch Probleme mit derrouterLinkActive
Direktive.Es funktioniert nicht, wenn Sie mehrere Links mit derselben URL haben und es nicht ständig aktualisiert zu werden scheint.
Inspiriert von der Antwort von @tomaszbak habe ich eine kleine Komponente erstellt , um die Arbeit zu erledigen
quelle
Reine HTML-Vorlage wie sein
quelle
Beginnen Sie mit dem Import von RouterLinkActive in Ihre .ts
Verwenden Sie jetzt RouterLinkActive in Ihrem HTML
Geben Sie der Klasse "class_Name" etwas CSS. Wenn dieser Link aktiv ist / angeklickt wird, finden Sie diese Klasse während der Überprüfung in der Spanne.
quelle
Ein programmatischer Weg wäre, dies in der Komponente selbst zu tun. Ich hatte drei Wochen mit diesem Problem zu kämpfen, gab aber eckige Dokumente auf und las den eigentlichen Code, mit dem routerlinkactive funktioniert, und das sind die besten Dokumente, die ich finden kann.
Hinweis :
Stellen Sie für die programmatische Ausführung sicher, dass Sie den Router-Link hinzufügen und ein untergeordnetes Element benötigt. Wenn Sie das ändern wollen, müssen Sie die Kinder loswerden
superclass.nativeElement
.quelle