Tutorial Angular: 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 del módulo.

¿Cómo utilizar routerLink?

Para utilizar routerLink en Angular, existen dos enfoques principales dependiendo de la estructura de tu aplicación:

Enfoque tradicional basado en módulos

Para utilizar routerLink, primero se debe de asegurar que la aplicación tenga configurado el Router de Angular en el módulo principal o en un módulo de enrutado específico. Esto se hace importando RouterModule y aplicando su método forRoot o forChild con las rutas correspondientes.

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

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Luego, importa este módulo en tu AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Enfoque moderno basado en componentes standalone

Configura las 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 }
];

Configura 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)]
};

Inicializa la aplicació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));

Para componentes standalone, asegúrate de importar RouterLink y RouterOutlet:

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

@Component({
  selector: 'app-root',
  standalone: true,
  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 con cualquiera de estos enfoques, 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.

En ambos casos, 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 el módulo de enrutamiento 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 del módulo Angular. No se pasan parámetros, lo que simplifica la navegación para rutas estáticas.

Veamos cómo podría verse:

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.

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 y módulos de características, 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:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'item/:id', component: ItemDetailComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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 Ítem</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 Ítem</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.
• Módulos de características: Si tienes módulos específicos cargados de manera diferida (lazy loading), 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 rutas auxiliares 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.