No Angular, como você determina a rota ativa?

OBSERVAÇÃO: Existem muitas respostas diferentes aqui e a maioria foi válida uma vez ou outra. O fato é que o que funciona mudou várias vezes, pois a equipe do Angular mudou seu roteador. A versão do roteador 3.0, que eventualmente será o roteador no Angular, quebra muitas dessas soluções, mas oferece uma solução muito simples. A partir do RC.3, a solução preferida é usar [routerLinkActive]como mostrado nesta resposta .

Em um aplicativo Angular (atual na versão 2.0.0-beta.0 enquanto escrevo isso), como você determina qual é a rota atualmente ativa?

Estou trabalhando em um aplicativo que usa o Bootstrap 4 e preciso marcar os links / botões de navegação como ativos quando o componente associado estiver sendo mostrado em uma <router-output>tag.

Percebo que eu mesmo poderia manter o estado quando um dos botões é clicado, mas isso não abrangeria o caso de ter vários caminhos na mesma rota (por exemplo, um menu de navegação principal e um menu local no componente principal )

Todas as sugestões ou links serão apreciados. Obrigado.

Com o novo roteador Angular , você pode adicionar um [routerLinkActive]="['your-class-name']"atributo a todos os seus links:

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

Ou o formato simplificado sem matriz, se apenas uma classe for necessária:

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

Ou um formato ainda mais simples se apenas uma classe for necessária:

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

Consulte a diretiva mal documentadarouterLinkActive para obter mais informações. (Eu principalmente descobri isso por tentativa e erro.)

ATUALIZAÇÃO: Melhor documentação para a routerLinkActivediretiva agora pode ser encontrada aqui . (Obrigado a Victor Hugo Arango A. nos comentários abaixo.)

Eu respondi isso em outra pergunta, mas acredito que possa ser relevante para essa também. Aqui está um link para a resposta original: Angular 2: Como determinar a rota ativa com parâmetros?

Eu tenho tentado definir a classe ativa sem ter que saber exatamente qual é o local atual (usando o nome da rota) . A melhor solução que tenho até agora é usar a função isRouteActive disponível na Routerclasse.

router.isRouteActive(instruction): Booleanpega um parâmetro que é um Instructionobjeto de rota e retorna trueou falsese essa instrução é verdadeira ou não para a rota atual. Você pode gerar uma rota Instructionusando Routero comando generate (linkParams: Array) . LinkParams segue exatamente o mesmo formato que um valor passado para uma diretiva routerLink (por exemplo router.isRouteActive(router.generate(['/User', { user: user.id }]))).

É assim que o RouteConfig pode se parecer (eu o aprimorei um pouco para mostrar o uso de parâmetros) :

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

E o View ficaria assim:

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

Esta tem sido a minha solução preferida para o problema até agora, pode ser útil para você também.

Resolvi um problema encontrado neste link e descobri que há uma solução simples para sua pergunta. Você poderia usar router-link-activeem seus estilos.

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

Pequena melhoria na resposta @ alex-correia-santos com base em 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 use-o assim:

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

Você pode verificar a rota atual injetando o Locationobjeto no seu controlador e verificando o seguinte path():

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

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

Você precisará importá-lo primeiro:

import {Location} from "angular2/router";

Você pode usar uma expressão regular para corresponder ao caminho retornado para ver qual rota está ativa. Observe que a Locationclasse retorna um caminho normalizado, independentemente do que LocationStrategyvocê está usando. Portanto, mesmo se você estiver usando HashLocationStragegyos caminhos retornados, ainda estará no formato /foo/bar não #/foo/bar

como você determina qual é a rota atualmente ativa?

UPDATE: atualizado conforme 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
}

ver mais...

Para marcar rotas ativas, routerLinkActivepode ser usado

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

Isso também funciona em outros elementos como

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

Se correspondências parciais também devem ser marcadas, use

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

Até onde eu sei, exact: falseserá o padrão no RC.4

No momento, estou usando o rc.4 com o bootstrap 4 e este funciona perfeito para mim:

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

Isso funcionará para o URL: / home

Abaixo está o método usando RouteData para estilizar itens menuBar, dependendo da rota atual:

RouteConfig inclui dados com guia (rota atual):

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

Um pedaço de 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;
  }
}

Apenas pensei em adicionar um exemplo que não usa nenhum tipo de texto:

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

A routerLinkActivevariável é vinculada a uma variável de modelo e, em seguida, reutilizada conforme necessário. Infelizmente, a única ressalva é que você não pode ter tudo isso no <section>elemento, pois #homeprecisa ser resolvido antes da execução do analisador <section>.

Routerno Angular 2 RC não define mais isRouteActivee generatemétodos.

urlTree - Retorna a árvore de URL atual.

createUrlTree(commands: any[], segment?: RouteSegment) - Aplica uma matriz de comandos à árvore de URL atual e cria uma nova árvore de URL.

Tente seguir

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

aviso, routeSegment : RouteSegmentdeve ser injetado no construtor do componente.

Aqui está um exemplo completo para adicionar estilo de rota ativo na versão Angular, 2.0.0-rc.1que leva em consideração caminhos raiz nulos (por exemplo path: '/')

app.component.ts -> Rotas

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>

Solução para 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 partir do Angular 8, isso funciona:

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

{ exact: true } garante que ele corresponda ao URL.

em 2020, se você quiser definir a classe ativa no elemento que não possui [routerLink] - você pode fazer simplesmente:

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

Outra solução alternativa. Muito mais fácil no Angular Router V3 Alpha. injetando o roteador

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>

No Angular2 RC2, você pode usar esta implementação simples

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

isso adicionará classe activeao elemento com o URL correspondente, leia mais aqui

Abaixo estão as respostas para esta pergunta para todas as versões do Angular 2 RC lançadas até a data:

RC4 e RC3 :

Para aplicar a classe ao link ou ancestral do link:

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

/ home deve ser a URL e não o nome da rota, pois a propriedade name não existe mais no objeto de rota a partir do roteador v3.

Mais sobre a diretiva routerLinkActive neste link .

Para aplicar classe a qualquer div com base na rota atual:

• Injete o roteador no construtor do componente.
• Usuário router.url para comparação.

por exemplo

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

RC2 e RC1 :

Use a combinação de router.isRouteActive e classe. *. por exemplo, para aplicar a classe ativa com base na rota doméstica.

Nome e URL podem ser passados ​​para router.generate.

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

O uso routerLinkActiveé bom em casos simples, quando há um link e você deseja aplicar algumas classes. Mas em casos mais complexos em que você pode não ter um routerLink ou em que precisa de algo mais, pode criar e usar um canal :

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

então:

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

e não se esqueça de incluir pipe nas dependências de pipes;)

Para a versão Angular 4+, você não precisa usar nenhuma solução complexa. Você pode simplesmente usar[routerLinkActive]="'is-active'" .

Por exemplo, com o link de navegação 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>

Uma instância da classe Router é realmente um Observable e retorna o caminho atual toda vez que muda. É assim que eu faço:

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 então no meu HTML:

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

Conforme mencionado em um dos comentários da resposta aceita, a routerLinkActivediretiva também pode ser aplicada a um contêiner da <a>tag real .

Por exemplo, nas guias do Twitter Bootstrap, em que a classe ativa deve ser aplicada à <li>tag que contém o link:

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

Muito arrumado ! Suponho que a diretiva inspecione o conteúdo da tag e procure uma <a>tag com a routerLinkdiretiva.

A solução simples para 5 usuários angulares é apenas adicionar routerLinkActiveao item da lista.

Uma routerLinkActivediretiva está associada a uma rota através de umrouterLink diretiva.

Ele assume como entrada uma matriz de classes que será adicionada ao elemento ao qual está anexado se sua rota estiver ativa no momento, da seguinte forma:

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

O item acima adicionará uma classe de ativo à marca de âncora, se estivermos visualizando a rota inicial.

E na versão mais recente do angular, você pode simplesmente verificar router.isActive(routeNameAsString). Por exemplo, veja o exemplo abaixo:

 <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 certifique-se de não esquecer o roteador de injeção no seu componente.

Eu estava procurando uma maneira de usar uma navegação no estilo Bootstrap do Twitter com o Angular2, mas tive problemas para obter o active para aplicar classe ao elemento pai do link selecionado. Verificou que a solução de @ alex-correia-santos funciona perfeitamente!

O componente que contém suas guias deve importar o roteador e defini-lo em seu construtor antes que você possa fazer as chamadas necessárias.

Aqui está uma versão simplificada da minha implementação ...

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

digamos que você queira adicionar CSS ao meu estado / guia ativo. Use routerLinkActive para ativar seu link de roteamento.

nota: 'ativo' é o nome da minha classe aqui

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

Estou usando roteador angular ^3.4.7e ainda estou tendo problemas com a routerLinkActivediretiva.

Não está funcionando se você tiver vários links com o mesmo URL, além de não parecer atualizado o tempo todo.

Inspirado pela resposta @tomaszbak, criei um pequeno componente para fazer o trabalho

Modelo de HTML puro ser como

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

comece com a importação do RouterLinkActive no seu .ts

import {RouterLinkActive} de '@ angular / router';

Agora use RouterLinkActive no seu HTML

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

forneça algum css para a classe "class_Name", pois quando este link estiver ativo / clicado, você encontrará essa classe em extensão durante a inspeção.

Uma maneira programática seria fazê-lo no próprio componente. Eu lutei três semanas nessa questão, mas desisti de documentos angulares e li o código real que fazia o trabalho de linklink do roteador ser um dos melhores documentos que posso encontrar.

    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 :
Pela maneira programática, certifique-se de adicionar o link do roteador e é necessário um elemento filho. Se você quer mudar isso, precisa se livrar das crianças superclass.nativeElement.