La directiva routerLink en Angular

La directiva routerLink en Angular permite a los desarrolladores configurar rutas de navegación en aplicaciones de una sola página (SPA). Esto se logra al vincular los enlaces en la vista a rutas específicas definidas en la configuración de rutas de la aplicación.

¿Cómo utilizar routerLink?

En Angular 21, todas las aplicaciones utilizan el enfoque standalone con provideRouter(). A continuación se muestra la configuración estándar.

Configuración de rutas en app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Configuración de la aplicación en app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Inicialización en main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Uso de routerLink en el componente principal

Para usar routerLink, importa RouterLink y RouterOutlet en el array imports del componente:

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

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  template: `
    <nav>
      <a routerLink="/">Inicio</a>
      <a routerLink="/about">Acerca de</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

Una vez configuradas las rutas, puedes usar routerLink en tus componentes. routerLink se aplica como una directiva en los elementos de anclaje (<a>) o en otros elementos HTML que lo soporten.

Ejemplo básico de uso de routerLink:

<nav>
  <a routerLink="/">Inicio</a>
  <a routerLink="/about">Acerca de</a>
</nav>
<router-outlet></router-outlet>

En este ejemplo, los enlaces proporcionados por routerLink permiten navegar entre el componente HomeComponent y el AboutComponent sin recargar la página.

routerLink genera enlaces que permiten la navegación entre componentes sin recargar la página. La directiva puede aceptar fragmentos de URL, matrix parameters y query parameters. Además, routerLinkActive es una directiva complementaria para aplicar clases CSS cuando la ruta está activa.

Uso avanzado de routerLink

Además de trabajar con rutas estáticas, routerLink soporta rutas dinámicas y parámetros. Por ejemplo, si necesitas pasar parámetros a una ruta, puedes encapsular el valor de routerLink en corchetes y usar la sintaxis de enlaces de propiedad.

Parámetros de ruta y query parameters

<a [routerLink]="['/items', item.id]">Ver detalles</a>
<a [routerLink]="['/items']" [queryParams]="{order: 'asc'}">Ordenar Ascendente</a>

En este ejemplo, la primera línea navega a una ruta con un parámetro específico item.id. La segunda línea navega a una ruta y pasa parámetros de consulta para ordenar los elementos.

routerLink y seguridad

Es importante tener en cuenta las consideraciones de seguridad al usar routerLink. En particular, evitar la interpolación directa de datos no confiables en las rutas sin validación adecuada, ya que puede llevar a la manipulación de la URL y posibles vulnerabilidades de seguridad. Utiliza siempre la vinculación de propiedades angulares ([routerLink]) que ofrece protección contra inyecciones de URL.

routerLink sin parámetros

En Angular, utilizar routerLink sin parámetros es una operación común para navegar entre rutas predeterminadas. Esta acción simplemente vincula una ruta estática definida en la configuración de rutas a un elemento de la vista, típicamente un elemento <a>.

En su forma más básica, routerLink puede ser utilizado sin corchetes en el enlace, lo que indica que el valor es una cadena estática. A continuación se ofrecen ejemplos más concretos sobre cómo se usa routerLink sin parámetros en una aplicación Angular:

<nav>
  <a routerLink="/">Inicio</a>
  <a routerLink="/about">Acerca de</a>
  <a routerLink="/contact">Contacto</a>
</nav>
<router-outlet></router-outlet>

En este ejemplo, cada <a> elemento de anclaje utiliza routerLink con rutas estáticas que han sido definidas previamente en la configuración de rutas. No se pasan parámetros, lo que simplifica la navegación para rutas estáticas.

Veamos cómo podría verse la configuración de rutas:

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

En este contexto, al hacer click en "Inicio", "Acerca de", o "Contacto", el enrutador navega a las rutas HomeComponent, AboutComponent y ContactComponent, respectivamente, sin necesidad de parámetros adicionales.

Además, routerLink sin parámetros puede ser utilizado en combinación con rutas secundarias o anidadas. Consideremos que se tiene una ruta secundaria dentro de otra ruta principal.

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
      { path: 'stats', component: StatsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

En el DashboardComponent, se pueden organizar los enlaces para las rutas secundarias como sigue:

<div>
  <a routerLink="stats">Estadísticas</a>
  <a routerLink="settings">Configuración</a>
</div>
<router-outlet></router-outlet>

Aquí, routerLink se usa sin parámetros y navega correctamente a las rutas stats y settings dentro de DashboardComponent.

Finalmente, en el contexto de componentes reutilizables, routerLink sin parámetros hace que la navegación entre diferentes secciones de una aplicación Angular sea intuitiva y coherente, eliminando la necesidad de lógica adicional en el código para manejar parámetros y asegurando una mayor legibilidad y mantenibilidad del código.

routerLink con parámetros

Para utilizar routerLink con parámetros en Angular, la directiva tiene que estar enlazada a una ruta que acepte parámetros dinámicos. Esto es común en aplicaciones que requieren navegación a detalles de elementos específicos o cualquier otra ruta personalizada basada en parámetros.

Primero, se debe definir la ruta en la configuración del enrutador para hacer uso de parámetros de ruta:

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'item/:id', component: ItemDetailComponent }
];

En este ejemplo, la ruta item/:id define un parámetro dinámico id que puede ser cualquier valor.

Para navegar a esta ruta con un parámetro utilizando routerLink, se emplea la vinculación de propiedades en el HTML. Aquí se muestran dos maneras de pasar parámetros utilizando routerLink:

Ejemplo con un único parámetro de ruta:

<a [routerLink]="['/item', item.id]">Ver Detalles del Item</a>

En este caso, item.id es el valor dinámico que se pasa a la ruta item/:id.

Ejemplo con parámetros de consulta adicionales:

Además de los parámetros de ruta, es posible pasar parámetros de consulta utilizando la propiedad queryParams:

<a [routerLink]="['/item', item.id]" [queryParams]="{ review: true, sortBy: 'date' }">Ver y Revisar Item</a>

En este ejemplo, se está navegando a la ruta item/:id y además se pasan parámetros de consulta review y sortBy.

Consideraciones adicionales

• Validación y seguridad: Siempre valida y sanitiza los parámetros de ruta y consulta para evitar problemas de seguridad.
• Lazy loading: Si tienes rutas con loadComponent o loadChildren para carga diferida, asegúrate de que sus rutas estén correctamente configuradas para aceptar parámetros.
• Manejar parámetros opcionales: Aunque este ejemplo muestra parámetros obligatorios, también es posible manejar parámetros opcionales utilizando query params y técnicas adicionales de enrutamiento de Angular.

En resumen, routerLink con parámetros proporciona una forma dinámica y flexible de navegación dentro de aplicaciones Angular, permitiendo una rica interacción usuario-aplicación.