javascript - w3schools - Em Angular, como você determina a rota ativa?




w3schools titles (19)

NOTA: Existem muitas respostas diferentes aqui, e a maioria tem sido válida em um momento ou outro. O fato é que o que funciona mudou várias vezes quando a equipe de Angular mudou seu roteador. A versão do Roteador 3.0 que eventualmente será o roteador em 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 de uma maneira de marcar os links / botões de navegação como ativos quando o componente associado estiver sendo mostrado em uma tag <router-output> .

Eu percebo que eu poderia manter o estado sozinho quando um dos botões é clicado, mas isso não cobriria o caso de ter vários caminhos na mesma rota (digamos, um menu de navegação principal, bem como um menu local no componente principal ).

Quaisquer sugestões ou links seriam apreciados. Obrigado.


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


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

RouteConfig inclui dados com aba (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;
  }
}

Agora eu estou usando o rc.4 com 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 url: / home


Apenas pensei em adicionar um exemplo que não usa nenhum typescript:

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

A variável routerLinkActive é 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 elemento <section> porque #home precisa ser resolvido antes de o analisador bater <section> .


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

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

Ou o formato não-matriz simplificado, 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>

Veja a diretiva routerLinkActive mal documentada para mais informações. (Eu principalmente percebi isso por meio de tentativa e erro.)

UPDATE: Melhor documentação para a diretiva routerLinkActive agora pode ser encontrada here . (Agradecimentos ao @Victor Hugo Arango A. nos comentários abaixo.)


Como de Angular 8, isso funciona:

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

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


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 que você não está esquecendo de injetar o roteador em seu componente.


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

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

isso adicionará a classe active ao elemento com o URL correspondente, leia mais sobre isso angular.io/docs/ts/latest/api/router/index/…


Eu estava procurando uma maneira de usar um nav de estilo Twitter Bootstrap com Angular2, mas tive problemas para obter a classe active aplicada ao elemento pai do link selecionado. Descobri que a solução do @ 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 ){}
}

Eu resolvi um problema que encontrei neste link e descubro que existe uma solução simples para sua pergunta. Você poderia usar router-link-active em seus estilos.

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

O modelo html puro é como

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</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>

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

Para um exemplo com o link bootstrap 4 nav:

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

Pequena melhora para a resposta do @ 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 usá-lo 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>

Solução simples para usuários angulares 5 é, basta adicionar routerLinkActive ao item da lista.

Uma diretiva routerLinkActive está associada a uma rota por meio de uma diretiva routerLink .

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

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

Acima, você adicionará uma classe de ativo à tag de âncora, se estivermos visualizando a rota de origem.


Uma instância da classe Roteador é realmente um Observable e retorna o caminho atual toda vez que ele é alterado. É 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>

Você pode verificar a rota atual injetando o objeto Location no seu controlador e verificando o path() , da seguinte maneira:

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

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

Você terá que importá-lo primeiro:

import {Location} from "angular2/router";

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


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

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

Agora use o RouterLinkActive no seu HTML

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

forneça alguns css para a classe "class_Name", como quando este link estiver ativo / clicado, você encontrará esta classe no span durante a inspeção.


Router em Angular 2 RC não define mais isRouteActive e generate mé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]))">

notice, routeSegment : RouteSegment deve ser injetado no construtor do componente.







angular2-routing