Anwenden von CSS-aktiven router link [Eckige 2]

Ich möchte ein spezielles CSS-style-Eigenschaften zu aktiven router-links:

HTML:

<a [routerLink]='link'>{{name}}</a>

Hier ist, was ich versucht habe, so weit (Mit der Standard-router-link-active-Klasse):

CSS:

.router-link-active {
	color: #000;
	font-weight: bold;
}

Es funktioniert nicht und ich verstehe wirklich nicht, warum.

  • Ich glaube nicht, dass es tatsächlich ein Duplikat ist; die andere Frage war für Winkel-1, während dies angular2, und angular2 router ist mehrere Versionen entfernt von angular1 ist.
InformationsquelleAutor Platus | 2016-07-15
  1. 14

    Derzeit Winkel-2 hat eine Baujahr-Attribut, die Sie verwenden können Sie auf einen link, der verwendet wird, mit [routerLink] es ist routerLinkActive so alle Sie tun müssen ist:

    <a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>

    und dann wird es zu erkennen, welche route ist die aktive route und wenden Sie Ihre router-link-active-Klasse.

    HINWEIS:

    Für diejenigen, die mit routerLink auf tags andere als a tags, (ich persönlich benutze es auf einer Taste) routerLinkActive funktioniert nicht, sollte aber die Arbeit an der nächsten Version der router - https://github.com/angular/angular/issues/9755

    • dies funktioniert gut, und wie bekomme ich ein boolescher innerhalb meiner Komponente Typoskript-Klasse, der angibt, ob der router die Verbindung aktiv ist oder nicht?
    • Also... ist es, dass Sie brauchen nur zu wissen, ob es ein element auf Ihrer Seite der router-link-active-Klasse? oder sind Sie versuchen, herauszufinden, welche route ist zurzeit aktiv?
    • Ich möchte herausfinden, welche route aktiv ist, eigentlich ich habe eine single-link router in einem TabComponent template und ich dann zu erzeugen, viele router links mit *ngFor in einer übergeordneten Komponente
    • In diesem Fall würden Sie brauchen, um sich in ActivatedRoute gibt es alles, was Sie wollen könnte und mehr über die Komponente, die geladen wurde. Wenn Sie am Ende die Probleme der Umsetzung, erstellen Sie bitte eine neue Frage
    • Arbeiten mit freigegebenen version 2.0 zu.
    • allerdings, wenn Sie hinzufügen eine click-Funktion, um den a-tag, und ändern Sie den Speicherort basierend auf #href-tag - es fällt die pseudo-aktiven Klasse styling -- wie würden Sie also binden, die <a> tag, um eine id auf der Seite mal angeklickt?

    InformationsquelleAutor Jarod Moser
  2. 3

    Den neuen router hat eine Richtlinie genannt "routerLinkActive" das ist, was Sie interessiert sind in.

    Ex.<a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a>

    ", Wenn die url ist entweder "/user "oder" /user/bob', der active-link-Klasse Hinzugefügt werden, um das a-tag. Wenn sich die url ändert, wird die Klasse entfernt."

    InformationsquelleAutor Ron
  3. 0

    Ohne alles besser wissen, das ist die Richtung, würde ich Sie an.

    HTML:

    <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, zu true ausgewertet, die Klasse (und styling) angewendet werden.

    InformationsquelleAutor the bug
Schreibe einen Kommentar