In Angolare, come si determina il percorso attivo?

NOTA: ci sono molte risposte diverse qui, e la maggior parte sono state valide una volta o l'altra. Il fatto è che ciò che funziona è cambiato più volte poiché il team Angular ha cambiato il suo router. La versione 3.0 del router che alla fine sarà il router in Angular rompe molte di queste soluzioni, ma offre una soluzione molto semplice. A partire da RC.3, la soluzione preferita è usare [routerLinkActive]come mostrato in questa risposta .

In un'applicazione angolare (corrente nella versione 2.0.0-beta.0 mentre scrivo questo), come si determina quale percorso attualmente è attivo?

Sto lavorando su un'app che utilizza Bootstrap 4 e ho bisogno di un modo per contrassegnare i collegamenti / pulsanti di navigazione come attivi quando il loro componente associato viene mostrato in un <router-output> tag.

Mi rendo conto che potrei mantenere lo stato da solo quando si fa clic su uno dei pulsanti, ma ciò non coprirebbe il caso di avere più percorsi nello stesso percorso (ad esempio un menu di navigazione principale e un menu locale nel componente principale ).

Eventuali suggerimenti o collegamenti sarebbero apprezzati. Grazie.

Con il nuovo router angolare , puoi aggiungere un [routerLinkActive]="['your-class-name']"attributo a tutti i tuoi collegamenti:

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

O il formato non array semplificato se è necessaria una sola classe:

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

O un formato ancora più semplice se è necessaria una sola classe:

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

Vedi la direttiva male documentatarouterLinkActive per maggiori informazioni. (L'ho capito principalmente tramite tentativi ed errori.)

UPDATE: Meglio documentazione per la routerLinkActivedirettiva può essere trovato qui . (Grazie a @Victor Hugo Arango A. nei commenti qui sotto.)

Ho risposto in un'altra domanda, ma credo che potrebbe essere rilevante anche per questo. Ecco un link alla risposta originale: Angolare 2: come determinare il percorso attivo con i parametri?

Ho cercato di impostare la classe attiva senza dover sapere esattamente quale sia la posizione corrente (usando il nome del percorso) . La migliore soluzione che ho avuto finora è utilizzare la funzione isRouteActive disponibile nella Routerclasse.

router.isRouteActive(instruction): Booleanaccetta un parametro che è un Instructionoggetto route e restituisce trueo falsese quell'istruzione è vera o meno per la route corrente. È possibile generare una route Instructionusando Router' generate (linkParams: Array) . LinkParams segue lo stesso formato esatto di un valore passato in una direttiva routerLink (ad esrouter.isRouteActive(router.generate(['/User', { user: user.id }])) .).

Ecco come potrebbe apparire RouteConfig (l'ho modificato un po 'per mostrare l'uso dei parametri) :

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

E la vista sarebbe simile a questa:

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

Questa è stata la mia soluzione preferita per il problema finora, potrebbe essere utile anche per te.

Ho risolto un problema riscontrato in questo link e ho scoperto che esiste una soluzione semplice per la tua domanda. Puoi usare router-link-activeinvece nei tuoi stili.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

Piccolo miglioramento alla risposta @ alex-correia-santos basata su 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));
  }
} 

E usalo in questo modo:

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

Puoi controllare il percorso corrente iniettando l' Locationoggetto nel tuo controller e controllando path(), in questo modo:

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

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

Dovrai assicurarti di importarlo prima:

import {Location} from "angular2/router";

È quindi possibile utilizzare un'espressione regolare da confrontare con il percorso restituito per vedere quale percorso è attivo. Nota che la Locationclasse restituisce un percorso normalizzato indipendentemente da quale LocationStrategystai usando. Quindi, anche se stai usando i HashLocationStragegypercorsi restituiti sarà comunque del modulo /foo/bar no #/foo/bar

come si determina qual è il percorso attualmente attivo?

AGGIORNAMENTO: aggiornato secondo 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
}

Vedi altro...

Per contrassegnare i percorsi attivi routerLinkActivepuò essere utilizzato

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

Questo funziona anche su altri elementi come

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

Se anche le corrispondenze parziali devono essere contrassegnate, utilizzare

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

Per quanto ne so exact: falsesarà l'impostazione predefinita in RC.4

In questo momento sto usando rc.4 con bootstrap 4 e questo funziona perfettamente per me:

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

Questo funzionerà per url: / home

Di seguito è riportato il metodo che utilizza RouteData per assegnare uno stile agli elementi del menuBar a seconda del percorso corrente:

RouteConfig include i dati con la scheda (percorso corrente):

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

Un pezzo di 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>

Classe:

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;
  }
}

Ho solo pensato di aggiungere un esempio che non usa alcun dattiloscritto:

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

La routerLinkActivevariabile viene associata a una variabile modello e quindi riutilizzata come richiesto. Sfortunatamente, l'unico avvertimento è che non è possibile avere tutto questo <section>sull'elemento, poiché è #homenecessario risolverlo prima di colpire il parser <section>.

Routerin Angular 2 RC non definisce più isRouteActivee generatemetodi.

urlTree - Restituisce l'albero degli URL corrente.

createUrlTree(commands: any[], segment?: RouteSegment) - Applica una serie di comandi all'attuale albero degli url e crea un nuovo albero degli url.

Prova a seguire

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

notare, routeSegment : RouteSegmentdeve essere iniettato nel costruttore del componente.

Ecco un esempio completo per l'aggiunta di stili di percorso attivi nella versione angolare 2.0.0-rc.1che tiene conto di percorsi radice nulli (ad es. path: '/')

app.component.ts -> Percorsi

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>

Soluzione per 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);
}

A partire da Angular 8, questo funziona:

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

{ exact: true } assicura che corrisponda all'URL.

nel 2020 se si desidera impostare la classe attiva su un elemento che non ha [routerLink] - si può semplicemente fare:

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

Un'altra soluzione alternativa. Molto più facile in Angular Router V3 Alpha. iniettando il router

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

export class AppComponent{

    constructor(private router : Router){}

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

uso

<div *ngIf="routeIsActive('/')"> My content </div>

In Angular2 RC2 è possibile utilizzare questa semplice implementazione

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

questo aggiungerà classe activeall'elemento con url abbinato, leggi di più qui

Di seguito sono riportate le risposte a questa domanda per tutte le versioni di Angular 2 RC rilasciate fino ad oggi:

RC4 e RC3 :

Per applicare la classe al collegamento o all'antenato del collegamento:

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

/ home dovrebbe essere l'URL e non il nome della route poiché la proprietà name non esiste più su Route Object a partire dal router v3.

Maggiori informazioni sulla direttiva routerLinkActive a questo link .

Per applicare la classe a qualsiasi div in base alla rotta corrente:

• Iniettare il router nel costruttore del componente.
• User router.url per il confronto.

per esempio

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

RC2 e RC1 :

Utilizzare la combinazione di router.isRouteActive e class. *. ad es. per applicare la classe attiva in base alla rotta principale.

Nome e url possono entrambi essere passati in router.generate.

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

L'uso routerLinkActiveè utile in casi semplici, quando è presente un collegamento e si desidera applicare alcune classi. Ma nei casi più complessi in cui potresti non avere un routerLink o dove hai bisogno di qualcosa in più puoi creare e usare una pipe :

@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);
    }
}

poi:

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

e non dimenticare di includere pipe nelle dipendenze pipe;)

Per Angular versione 4+, non è necessario utilizzare alcuna soluzione complessa. Puoi semplicemente usare [routerLinkActive]="'is-active'".

Per un esempio con il collegamento nav bootstrap 4:

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

Un'istanza della classe Router è in realtà un osservabile e restituisce il percorso corrente ogni volta che cambia. Ecco come lo faccio:

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;
 } 
}

E poi nel mio HTML:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

Come menzionato in uno dei commenti della risposta accettata, la routerLinkActivedirettiva può essere applicata anche a un contenitore del <a>tag effettivo .

Ad esempio, con le schede Bootstrap di Twitter in cui la classe attiva deve essere applicata al <li>tag che contiene il collegamento:

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

Piuttosto pulito ! Suppongo che la direttiva controlli il contenuto del tag e cerchi un <a>tag con la routerLinkdirettiva.

La soluzione semplice per gli utenti angolari 5 è, basta aggiungere routerLinkActive alla voce di elenco.

Una routerLinkActivedirettiva è associata a una route attraverso arouterLink direttiva.

Prende come input una matrice di classi che aggiungerà all'elemento a cui è collegata se la sua route è attualmente attiva, in questo modo:

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

Quanto sopra aggiungerà una classe di attivi al tag di ancoraggio se attualmente stiamo visualizzando il percorso principale.

E nell'ultima versione di angolare, puoi semplicemente fare un controllo router.isActive(routeNameAsString). Ad esempio vedi l'esempio seguente:

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

E assicurati di non dimenticare di iniettare il router nel tuo componente.

Stavo cercando un modo per usare un nav in stile Bootstrap di Twitter con Angular2, ma ho avuto problemi a ottenerlo active applicare classe all'elemento genitore del collegamento selezionato. Ho scoperto che la soluzione di @ alex-correia-santos funziona perfettamente!

Il componente contenente le tue schede deve importare il router e definirlo nel suo costruttore prima di poter effettuare le chiamate necessarie.

Ecco una versione semplificata della mia implementazione ...

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 ){}
}

diciamo che vuoi aggiungere CSS al mio stato / tab attivo. Utilizzare routerLinkActive per attivare il collegamento di routing.

nota: "attivo" è il nome della mia classe qui

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

Sto usando un router angolare ^3.4.7e sto ancora riscontrando problemi con la routerLinkActivedirettiva.

Non funziona se si dispone di più collegamenti con lo stesso URL e non sembra aggiornarsi continuamente.

Ispirato dalla risposta di @tomaszbak, ho creato un piccolo componente per fare il lavoro

Modello HTML puro essere come

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

inizia con l'importazione di RouterLinkActive nei tuoi .ts

importare {RouterLinkActive} da '@ angular / router';

Ora usa RouterLinkActive nel tuo HTML

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

fornisci alcuni css alla classe "class_Name", poiché quando questo link sarà attivo / cliccato troverai questa classe sull'intervallo durante l'ispezione.

Un modo programmatico sarebbe quello di farlo nel componente stesso. Ho lottato per tre settimane su questo problema, ma ho rinunciato ai documenti angolari e ho letto il codice reale che ha fatto funzionare il routerlinkactive e questo è quello sui migliori documenti che posso trovare.

    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
}

Nota :
per il modo programmatico, assicurarsi di aggiungere il collegamento router e richiede un elemento figlio. Se vuoi cambiarlo, devi sbarazzarti dei bambini superclass.nativeElement.