Navegación con routerLink

Navegación declarativa

La navegación declarativa permite movernos entre rutas directamente desde las plantillas de componentes utilizando la directiva routerLink. Este enfoque es más eficiente que usar enlaces HTML tradicionales porque evita las recargas completas de la página, manteniendo el comportamiento de una Single Page Application (SPA).

Ventajas de routerLink sobre href

A diferencia de los enlaces HTML tradicionales con href, routerLink no recarga la página completa. En su lugar, Angular actualiza solo la parte de la aplicación que necesita cambiar, proporcionando una experiencia de usuario más fluida y mejor rendimiento.

<!-- ❌ Evitar: Recarga toda la página -->
<a href="/productos">Productos</a>

<!-- ✅ Recomendado: Navegación SPA -->
<a routerLink="/productos">Productos</a>

Sintaxis básica con strings

La forma más simple de usar routerLink es con una cadena de texto que representa la ruta de destino:

<nav>
  <a routerLink="/home">Inicio</a>
  <a routerLink="/productos">Productos</a>
  <a routerLink="/contacto">Contacto</a>
</nav>

Esta sintaxis funciona perfectamente para rutas estáticas donde conocemos exactamente la URL de destino. Angular se encarga automáticamente de generar el enlace correcto y manejar la navegación.

Sintaxis con arrays para rutas complejas

Para rutas más complejas que incluyen segmentos dinámicos, routerLink acepta un array de strings donde cada elemento representa un segmento de la ruta:

<!-- Navegación a una ruta simple -->
<a [routerLink]="['/productos']">Productos</a>

<!-- Navegación con parámetros -->
<a [routerLink]="['/productos', 'categoria', 'laptops']">Laptops</a>

<!-- Navegación con ID dinámico -->
<a [routerLink]="['/productos', producto.id]">Ver producto</a>

Nota que cuando usamos arrays, necesitamos la sintaxis de property binding con corchetes [routerLink] porque estamos pasando una expresión TypeScript en lugar de una cadena literal.

Ejemplo práctico: Menú de navegación

Aquí tienes un ejemplo completo de un componente de navegación utilizando routerLink:

// navigation.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [RouterLink],
  template: `
    <nav class="navbar">
      <div class="nav-brand">
        <a routerLink="/">Mi Aplicación</a>
      </div>
      
      <ul class="nav-menu">
        <li><a routerLink="/dashboard">Dashboard</a></li>
        <li><a routerLink="/usuarios">Usuarios</a></li>
        <li><a routerLink="/reportes">Reportes</a></li>
        <li><a routerLink="/configuracion">Configuración</a></li>
      </ul>
    </nav>
  `,
  styles: [`
    .navbar { 
      display: flex; 
      justify-content: space-between; 
      padding: 1rem; 
    }
    .nav-menu { 
      display: flex; 
      list-style: none; 
      gap: 1rem; 
    }
    .nav-menu a { 
      text-decoration: none; 
      padding: 0.5rem 1rem; 
    }
  `]
})
export class NavigationComponent {}

Navegación relativa y absoluta

routerLink soporta tanto rutas absolutas (que comienzan con /) como rutas relativas:

<!-- Ruta absoluta: navega desde la raíz -->
<a routerLink="/admin/usuarios">Usuarios Admin</a>

<!-- Ruta relativa: navega desde la ruta actual -->
<a routerLink="detalle">Ver detalle</a>
<a routerLink="../anterior">Página anterior</a>

Las rutas relativas son especialmente útiles cuando construyes componentes reutilizables que pueden usarse en diferentes contextos de la aplicación.

Importación en componentes standalone

Para usar routerLink en componentes standalone, debes importar la directiva en el array imports:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-mi-componente',
  standalone: true,
  imports: [RouterLink], // ✅ Importar RouterLink
  template: `
    <a routerLink="/ejemplo">Enlace de ejemplo</a>
  `
})
export class MiComponente {}

Esta importación es necesaria porque estamos trabajando con componentes standalone que deben declarar explícitamente todas sus dependencias.

RouterLinkActive

La directiva RouterLinkActive permite aplicar clases CSS automáticamente a los enlaces cuando su ruta coincide con la URL actual. Esta funcionalidad es esencial para crear menús de navegación intuitivos donde los usuarios pueden ver claramente en qué sección se encuentran.

Aplicación básica de clases activas

La sintaxis más simple de routerLinkActive consiste en especificar una o más clases CSS que se aplicarán cuando el enlace esté activo:

<nav>
  <a routerLink="/home" routerLinkActive="active">Inicio</a>
  <a routerLink="/productos" routerLinkActive="active">Productos</a>
  <a routerLink="/contacto" routerLinkActive="active">Contacto</a>
</nav>

.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

Angular detecta automáticamente cuándo la ruta actual coincide con el routerLink y aplica la clase active. Cuando el usuario navega a otra ruta, la clase se remueve automáticamente.

Múltiples clases CSS

Puedes aplicar múltiples clases utilizando un array de strings:

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

.active { background-color: #f8f9fa; }
.highlighted { border-left: 3px solid #007bff; }
.current { font-weight: 600; }

Esta funcionalidad es útil cuando necesitas aplicar diferentes estilos visuales como fondos, bordes y tipografías simultáneamente.

Ejemplo completo de navegación con estilos activos

Aquí tienes un ejemplo práctico de un menú lateral con estilos para enlaces activos:

// sidebar.component.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  template: `
    <aside class="sidebar">
      <nav class="nav-menu">
        <a routerLink="/dashboard" 
           routerLinkActive="nav-link-active"
           class="nav-link">
          📊 Dashboard
        </a>
        
        <a routerLink="/usuarios" 
           routerLinkActive="nav-link-active"
           class="nav-link">
          👥 Usuarios
        </a>
        
        <a routerLink="/productos" 
           routerLinkActive="nav-link-active"
           class="nav-link">
          📦 Productos
        </a>
        
        <a routerLink="/reportes" 
           routerLinkActive="nav-link-active"
           class="nav-link">
          📈 Reportes
        </a>
      </nav>
    </aside>
  `,
  styles: [`
    .sidebar {
      width: 250px;
      background-color: #f8f9fa;
      height: 100vh;
      padding: 1rem;
    }
    
    .nav-menu {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .nav-link {
      padding: 0.75rem 1rem;
      text-decoration: none;
      color: #495057;
      border-radius: 0.375rem;
      transition: all 0.2s ease;
    }
    
    .nav-link:hover {
      background-color: #e9ecef;
    }
    
    .nav-link-active {
      background-color: #007bff;
      color: white;
      font-weight: 500;
    }
  `]
})
export class SidebarComponent {}

RouterLinkActiveOptions para coincidencia exacta

Por defecto, routerLinkActive se activa cuando la ruta actual contiene la ruta del enlace. Para rutas que requieren coincidencia exacta, utiliza routerLinkActiveOptions:

<!-- Se activa para /home, /home/algo, /home/usuario, etc. -->
<a routerLink="/home" routerLinkActive="active">Inicio</a>

<!-- Solo se activa para /home exactamente -->
<a routerLink="/home" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{ exact: true }">
   Inicio
</a>

Esto es especialmente importante para el enlace raíz (/), que sin coincidencia exacta se activaría en todas las rutas:

<!-- ❌ Problemático: siempre estará activo -->
<a routerLink="/" routerLinkActive="active">Home</a>

<!-- ✅ Correcto: solo activo en la raíz -->
<a routerLink="/" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{ exact: true }">
   Home
</a>

Acceso programático al estado activo

También puedes acceder al estado activo mediante una variable de plantilla:

<a routerLink="/productos" 
   routerLinkActive="active"
   #productosLink="routerLinkActive">
   Productos
   @if (productosLink.isActive) {
     <span class="badge">Actual</span>
   }
</a>

.badge {
  background-color: #28a745;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

Esta técnica permite mostrar indicadores adicionales o ejecutar lógica cuando un enlace está activo.

Importación necesaria

Recuerda importar tanto RouterLink como RouterLinkActive en componentes standalone:

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [RouterLink, RouterLinkActive], // ✅ Ambas directivas
  template: `
    <a routerLink="/ejemplo" routerLinkActive="active">
      Enlace con estilo activo
    </a>
  `
})
export class NavigationComponent {}

La combinación de routerLink y routerLinkActive proporciona una experiencia de navegación profesional donde los usuarios siempre saben dónde se encuentran dentro de la aplicación.