Wie bestimmen Sie in Angular die aktive Route?

312

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.

Michael Oryl
quelle

Antworten:

355

Mit dem neuen Angular-Router können Sie [routerLinkActive]="['your-class-name']"allen Ihren Links ein Attribut hinzufügen :

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Oder das vereinfachte Nicht-Array-Format, wenn nur eine Klasse benötigt wird:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Oder ein noch einfacheres Format, wenn nur eine Klasse benötigt wird:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

Weitere Informationen finden Sie in der schlecht dokumentierten routerLinkActiveRichtlinie . (Ich habe das meistens durch Ausprobieren herausgefunden.)

UPDATE: Eine bessere Dokumentation für die routerLinkActiveRichtlinie finden Sie jetzt hier . (Danke an @Victor Hugo Arango A. in den Kommentaren unten.)

Jessepinho
quelle
4
Gibt es eine Möglichkeit, es zu aktivieren, wenn die Kinder der Route aktiv sind? Der Code hat eine @inputfor-Option, exact: falseaktiviert jedoch die Klasse, wenn auch die Geschwister der aktuellen Route aktiv sind.
Matej
1
@ GabrieleB-David Ich habe es nicht getestet, aber ich würde annehmen, dass router.navigate()das gut funktionieren würde. routerLinkActiveist lediglich ein Indikator dafür, ob dieser Link die aktive Route darstellt.
Jessepinho
7
Im angegebenen Beispiel wird [routerLinkActive] zum <a /> -Tag hinzugefügt. Es kann jedoch auch auf andere Elemente angewendet werden, wenn die Klasse an anderer Stelle benötigt wird. <ul> <li [routerLinkActive] = "[ 'aktiv']"> <a [routerLink]="[myRoute.Route]">
Oblivion2000
2
@jessepinho - Versucht es - [routerLinkActive] = "'active'" funktioniert nur, wenn Sie auch [routerLink] im a-Tag haben. Wenn Sie (click) = "navitageTo ('/ route')" anstelle von [routerLink] hatten und in dieser Funktion this.router.navigate (route) aufgerufen haben, wird die neue Komponente geladen, aber Ihre aktive CSS-Klasse hat gewonnen. ' nicht angewendet werden. Ich versuche, in dieser Funktion neben this.router.navigate (..) noch etwas anderes zu tun.
Mickael Caruso
2
Das Beispiel in der offiziellen Dokumentation könnte Ihnen helfen: angle.io/docs/ts/latest/api/router/index/…
Victor Hugo Arango A.
69

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 isRouteActiveRouter .

router.isRouteActive(instruction): BooleanNimmt einen Parameter, der ein InstructionRoutenobjekt ist, und gibt zurück, trueoder falseob diese Anweisung für die aktuelle Route wahr ist oder nicht. Sie können eine Route Instructionmithilfe von Router' generieren generieren (linkParams: Array) . LinkParams folgt genau demselben Format wie ein Wert, der an eine routerLink- Direktive (z router.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) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

Und die Ansicht würde so aussehen:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

Dies war bisher meine bevorzugte Lösung für das Problem, es könnte auch für Sie hilfreich sein.

Alex Santos
quelle
1
Ich denke, diese Lösung ist besser als die akzeptierte, da sie Angular-APIs anstelle von Regex verwendet, die dem Pfad entsprechen. Es ist immer noch ein bisschen hässlich, es wäre schön, es einfach tun zu können router.isRouteActive('Home').
Philip
2
Ich hatte einige Probleme beim Versuch, die Lösung zu implementieren, daher kann für einige möglicherweise nützlich sein: stackoverflow.com/questions/35882998/…
Nikita Vlasenko
5
sollte nicht vergessen, Routerin Klasse Konstruktor
Nikita Vlasenko
2
In der neuesten Angular 2-Version habe ich nameanstelle des asRouterkonfigurationsobjekts verwendet.
ComFreek
9
Dies kann stattdessen in rc1 verwendet werden:router.urlTree.contains(router.createUrlTree(['Home']))
František Žiačik
35

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-activestattdessen in Ihren Stilen verwenden.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
Quy Tang
quelle
2
Ich glaube, das sollte die akzeptierte Antwort sein. Der Router von Angular2 fügt dies automatisch für Sie hinzu.
Gabu
2
Leider fügt diese Klasse <a> hinzu, nicht am <li>
laifjei
Leider funktioniert es nicht wirklich gut. Ich habe ein dynamisch generiertes Menü und router-link-activeKlasse wird nicht zum aktiven aoder hinzugefügt li. Aber es gibt einen Ort, an dem ich Bootstrap benutze nav-tabsund der dort funktioniert.
Shri
33

Kleine Verbesserung der Antwort von @ alex-corria-santos basierend auf https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

Und benutze es so:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>
tomaszbak
quelle
und ein Stil in der Komponente styles : [.active {Hintergrundfarbe: aliceblue; } ]. +1 es funktioniert
Pratik Kelwalkar
Tolle Lösung, mit dieser können Sie den Router privat machen.
Kelvin Dealca
Dies ist eine viel bessere Lösung und besonders nützlich für einen Noob, der kleine Dinge wie das Erstellen des Konstruktors und das Übergeben des Routers vergisst! Sie haben den Scheck absolut verdient.
Methodiker
30

Sie können die aktuelle Route überprüfen, indem Sie das LocationObjekt in Ihren Controller einfügen und Folgendes überprüfen path():

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

Sie müssen sicherstellen, dass Sie es zuerst importieren:

import {Location} from "angular2/router";

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 LocationKlasse einen normalisierten Pfad zurückgibt, unabhängig davon, welchen LocationStrategySie verwenden. Also selbst wenn Sie die verwenden HashLocationStragegydie Pfade zurückgekehrt wird noch von der Form /foo/bar nicht #/foo/bar

Jason Teplitz
quelle
17

Wie bestimmen Sie die aktuell aktive Route?

UPDATE: aktualisiert gemäß Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

Mehr sehen...

Ankit Singh
quelle
14

Zum Markieren können aktive Routen routerLinkActiveverwendet werden

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

Dies funktioniert auch bei anderen Elementen wie

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

Wenn Teilübereinstimmungen ebenfalls markiert werden sollen, verwenden Sie

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

Soweit ich weiß, exact: falsewird dies die Standardeinstellung in RC.4 sein

Günter Zöchbauer
quelle
11

Im Moment benutze ich rc.4 mit Bootstrap 4 und dieses funktioniert perfekt für mich:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

Dies funktioniert für url: / home

Artem Sinowjew
quelle
Was ist der Zweck der genauen Option? Stimmt das nicht mit Unterpfaden überein /home/whatever?
Michael Oryl
Ja, exactmeine, 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 und exactfunktioniert ohne Option nicht. (nicht sicher, wie es im Kern funktioniert, ich habe es versucht und es funktioniert für mich)
Artem Sinowjew
7

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):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

Ein Stück Layout:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Klasse:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}
Ivan
quelle
7

Ich dachte nur, ich würde in einem Beispiel hinzufügen, das kein Typoskript verwendet:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

Die routerLinkActiveVariable 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 #homees vor dem Parser-Treffer behoben werden muss <section>.

Zze
quelle
Perfekte Lösung zum Anwenden von Bedingungen auf aktiven Routen. Wo @ Winkel / Router oder sonst nicht funktioniert.
Rohit Parte
Wow, das ist so hilfreich. Vielen Dank!
Yulian
6

Routerin Angular 2 definiert RC nicht mehr isRouteActiveundgenerate Methoden.

urlTree - Gibt den aktuellen URL-Baum zurück.

createUrlTree(commands: any[], segment?: RouteSegment) - Wendet eine Reihe von Befehlen auf den aktuellen URL-Baum an und erstellt einen neuen URL-Baum.

Versuchen Sie Folgendes

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

Beachten Sie, routeSegment : RouteSegmentmuss in den Konstruktor der Komponente eingefügt werden.

tchelidze
quelle
6

Hier ist ein vollständiges Beispiel für das Hinzufügen eines aktiven Routenstils in der Angular-Version, bei 2.0.0-rc.1dem Null-Root-Pfade berücksichtigt werden (zpath: '/' )

app.component.ts -> Routen

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>
Levi Fuller
quelle
6

Lösung für Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}
lukaville
quelle
5

Ab Angular 8 funktioniert dies:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } stellt sicher, dass es mit der URL übereinstimmt.

Codejockie
quelle
5

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:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>
Kurkov Igor
quelle
Danke, Igor. Dies ist die beste Lösung.
Dmitry Grinko
Vielen Dank für Ihr Feedback :)
Kurkov Igor
4

Eine weitere Problemumgehung. Viel einfacher in Angular Router V3 Alpha. durch Injektion von Router

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

Verwendung

<div *ngIf="routeIsActive('/')"> My content </div>
Shakee93
quelle
Sobald ich es importiere, erhalte ich die Eigenschaft 'isSkipSelf' mit dem Fehler null kann nicht gelesen werden. irgendwelche Ideen?
Atsituab
4

In Angular2 RC2 können Sie diese einfache Implementierung verwenden

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

Dadurch wird activedem Element eine Klasse mit übereinstimmender URL hinzugefügt. Weitere Informationen finden Sie hier

Khaled Al-Ansari
quelle
4

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:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ 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:

  • Injizieren Sie den Router in den Konstruktor der Komponente.
  • Benutzer router.url zum Vergleich.

z.B

<nav [class.transparent]="router.url==('/home')">
</nav>

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.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>
Inderdeep Singh
quelle
4

Die Verwendung routerLinkActiveist 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 :

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

dann:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

und vergiss nicht, Pipe in die Pipes-Abhängigkeiten aufzunehmen;)

Pleerock
quelle
Gute Idee, aber in angle2.0.0rc3 ändere ich this.router.isRouteActive ... in this._location.path () und füge dies hinzu: import {Location} from '@ angle / common';
Kamil Kiełczewski
2
Es scheint etwas im Code zu fehlen. Wo ist containsTreedefiniert?
Øystein Amundsen
4

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:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>
asmmahmud
quelle
3

Eine Instanz der Router-Klasse ist tatsächlich eine Observable und gibt bei jeder Änderung den aktuellen Pfad zurück. So mache ich es:

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

Und dann in meinem HTML:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>
Anees Dhansey
quelle
1
.subscribe ist auf der Router-Instanz nicht verfügbar.
Shivang Gupta
3

Wie in einem der Kommentare der akzeptierten Antwort erwähnt, kann die routerLinkActiveDirektive 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:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Ziemlich ordentlich! Ich nehme an, die Direktive überprüft den Inhalt des Tags und sucht nach einem <a>Tag mit der routerLinkDirektive.

Pierre Henry
quelle
2

Einfache Lösung für Winkel 5 Benutzer ist, einfach hinzufügen routerLinkActive zum Listenelement .

Eine routerLinkActiveDirektive 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.

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

Mit dem obigen Befehl wird dem Ankertag eine aktive Klasse hinzugefügt, wenn derzeit die Heimatroute angezeigt wird.

Demo

Prasanth Jaya
quelle
2

Und in der neuesten Version von Angular können Sie einfach überprüfen router.isActive(routeNameAsString). Siehe zum Beispiel das folgende Beispiel:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

Und stellen Sie sicher, dass Sie nicht vergessen, den Router in Ihre Komponente einzuspritzen.

ConductedClever
quelle
1

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 ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}
Ben Thielker
quelle
1

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

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>
UniCoder
quelle
0

Ich verwende einen Winkelrouter ^3.4.7und habe immer noch Probleme mit der routerLinkActiveDirektive.

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

RPDeshaies
quelle
0

Reine HTML-Vorlage wie sein

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
Bellash
quelle
0

Beginnen Sie mit dem Import von RouterLinkActive in Ihre .ts

{RouterLinkActive} aus '@ angle / router' importieren;

Verwenden Sie jetzt RouterLinkActive in Ihrem HTML

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

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.

T. Shashwat
quelle
0

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.

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

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.

Grant Mitchell Soundbreakr1
quelle