En Angular, ¿cómo se determina la ruta activa?

NOTA: Aquí hay muchas respuestas diferentes y la mayoría han sido válidas en un momento u otro. El hecho es que lo que funciona ha cambiado varias veces a medida que el equipo de Angular cambió su enrutador. La versión Router 3.0 que eventualmente será el enrutador en Angular rompe muchas de estas soluciones, pero ofrece una solución propia muy simple. A partir de RC.3, la solución preferida es utilizar [routerLinkActive]como se muestra en esta respuesta .

En una aplicación Angular (actual en la versión 2.0.0-beta.0 mientras escribo esto), ¿cómo se determina cuál es la ruta actualmente activa?

Estoy trabajando en una aplicación que usa Bootstrap 4 y necesito una forma de marcar los enlaces/botones de navegación como activos cuando su componente asociado se muestra en un<router-output> etiqueta.

Me doy cuenta de que yo mismo podría mantener el estado cuando se hace clic en uno de los botones, pero eso no cubriría el caso de tener varias rutas en la misma ruta (por ejemplo, un menú de navegación principal y un menú local en el componente principal). ).

Cualquier sugerencia o enlace será apreciado. Gracias.

Dec 17 '15 05:12 Michael Oryl

Respondí esto en otra pregunta, pero creo que podría ser relevante para esta también. Aquí hay un enlace a la respuesta original: Angular 2: ¿Cómo determinar la ruta activa con parámetros?

He estado intentando configurar la clase activa sin tener que saber exactamente cuál es la ubicación actual (usando el nombre de la ruta) . La mejor solución que he encontrado hasta ahora es usar la función isRouteActive disponible en la Routerclase.

router.isRouteActive(instruction): Booleantoma un parámetro que es un Instructionobjeto de ruta y devuelve truesi falseesa instrucción es verdadera o no para la ruta actual. Puede generar una ruta Instructionutilizando Router's generate(linkParams: Array) . LinkParams sigue exactamente el mismo formato que un valor pasado a una directiva routerLink (por ejemplo router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Así es como podría verse RouteConfig (lo he modificado un poco para mostrar el uso de parámetros) :

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

Y la Vista se vería así:

<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 ha sido mi solución preferida para el problema hasta ahora; podría resultarle útil a usted también.

Jan 02 '2016 23:01 Alex Santos

Pequeña mejora en la respuesta de @alex-correia-santos basada en 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));
  }
} 

Y úsalo así:

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

Mar 04 '2016 17:03 tomaszbak

Resolví un problema que encontré en este enlace y descubrí que hay una solución simple para tu pregunta. Podrías usarlo router-link-activeen su lugar en tus estilos.

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

Jan 16 '2016 05:01 Quy Tang

Puede verificar la ruta actual inyectando el Locationobjeto en su controlador y verificando path(), así:

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

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

Primero deberás asegurarte de importarlo:

import {Location} from "angular2/router";

Luego puede usar una expresión regular para compararla con la ruta devuelta y ver qué ruta está activa. Tenga en cuenta que la Locationclase devuelve una ruta normalizada independientemente de cuál LocationStrategyesté utilizando. Entonces, incluso si estás utilizando las HashLocationStragegyrutas devueltas seguirán teniendo el formato /foo/bar no #/foo/bar

Dec 16 '2015 23:12 Jason Teplitz