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.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
¿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.
Aprendizajes de esta lección
- Comprender la función de
routerLink
en Angular. - Aprender a usar
routerLink
para crear enlaces entre componentes. - Manejar rutas estáticas y dinámicas en Angular.
- Implementar prácticas de seguridad al manipular URLs con
routerLink
.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs