RouterLink y RouterActive

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Toda aplicación requiere de una barra de navegación, de un menú o enlaces para redireccionar a través de sus rutas.

Redirección de ruta en Angular

No es buena práctica realizar una redirección a otra ruta utilizando un simple href, ya que el mismo genera que se recargue toda la página y vuelva a renderizarse los componentes.
Angular posee una alternativa para evitar el redireccionamiento utilizando la directiva routerLink.

Comienza creando enlaces con el elemento HTML <a>, pero en lugar de utilizar href, utiliza routerLink.

<!-- components/nav-bar/nav-bar.components.html -->
<div class="header-right hidde-menu">
    <a routerLink="/home">Home</a>
    <a routerLink="/catalogo">Catalogo</a>
    <a routerLink="/about">About</a>
</div>

Es así de simple, si las rutas son correctas y están creadas en el archivo app-routing.module.ts, Angular renderizará a través del <router-outlet></router-outlet> el componente correspondiente a la ruta sin recargar la página.

Parámetros dinámicos en las rutas

También es posible hacer un binding en el routerLink para crear rutas con parámetros dinámicos. Para esto, rodea esta directiva de [] y pásale como input un array. Angular se encargará de construir las rutas con cada elemento del mismo.

<!-- modules/website/components/nav-bar/nav-bar.components.html -->
<div class="header-right hidde-menu">
    <a [routerLink]="['/catalogo', 'electronica']">Electrónica</a>
    <a [routerLink]="['/catalogo', 12]">Categoría 12</a>
    <a [routerLink]="['/catalogo', '13ABC']">Categoría 13ABC</a>
</div>

El ejemplo anterior dará como resultado las rutas /catalogo/electronica, /catalogo/12 y /catalogo/13ABC. Cada ruta con su propio parámetro dinámico que podrás capturar posteriormente en el controlador de tu componente.

Cómo identificar ruta activada

Para mejorar la experiencia del usuario utilizando la aplicación, es buena práctica resaltar con algún estilo CSS particular la ruta activada en el momento. Angular hace esto por nosotros gracias a la directiva routerLinkActive.

<div class="header-right hidde-menu">
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/catalogo" routerLinkActive="active">Catalogo</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
</div>

Cuando Angular identifique que la misma ruta del enlace está activa, le agregará la clase active. Ya luego es tarea de darle estilos a esta clase para que luzca diferente con respecto a las rutas desactivadas.

Contribución creada por: Kevin Fiorentino.

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Alejandro Mejia Escobar

hace 3 años

Les comparto el código de categories.services.ts para aquellos que vienen trabajando el proyecto desde antes y no clonaron el repositorio en este curso.

No es necesario crear un modelo para Categorías, recuerden que ya habíamos generado uno dentro del modelo de Productos

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Category } from '../interfaces/product.model';

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private apiUrl = `${environment.API_URL}/api/categories`;

  constructor(
    private http: HttpClient
  ) { }

  getAll(limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit),
      params = params.set('offset', offset)
    }
    return this.http.get<Category[]>(this.apiUrl, {params})
  }
}

antonn-fernandez

hace 3 años

Les comparto la documentacion oficial para ampliar los conceptos que Nico nos da en esta clase y en general en el curso:
https://docs.angular.lat/guide/router

Avilio Fernando Amador Soto

hace 2 años

Categoría electronics: 🙂

Categoría toys: …😲

Santiago Velandia Gallo

hace 2 años

Angular es genial, recuerdo que para hacer algo así tenía que hacer variables y funciones en javascript para saber en cual estaba posicionado

Daniel Avila Cardenas

hace un año

Increible clase de Routerlink & RouterActive, Espectacular.

Hugo Bustamante

hace 3 años

Con esta clase me surgió una duda con respecto a un caso. Si por ejemplo para una app que quiera renderizar solo información de diferentes ferreterías y quisiera mostrar la información en una sola pagina de solo una ferretería, tendría que crear por cada ferretería una pagina diferente y luego enrutarlas?. Agradezco mucho a quien me de una respuesta 😄

Luis Márquez

hace 2 años

ESTA CLASE ESTUVO GENIAL!

alberto ayala rodriguez

hace 3 años

bastante nasty los estilos ❄

Si ya tienes una cuenta,

Curso de Angular Router: Lazy Loading y Programación Modular

RouterLink y RouterActive

Redirección de ruta en Angular

Parámetros dinámicos en las rutas

Cómo identificar ruta activada