Cómo hacer un link en Angular en la Vista
El atributo RouterLink en Angular permite enlazar componentes y navegar entre rutas dentro de una aplicación de una manera eficiente, sin recargar la página. Es una de las herramientas clave del sistema de enrutamiento de Angular para crear aplicaciones SPA (Single Page Applications).
¿Qué es RouterLink y cómo funciona?
El atributo RouterLink se utiliza dentro de plantillas HTML para definir rutas que permiten la navegación en Angular. Este atributo interactúa con el RouterModule para manejar las rutas definidas en la configuración de la aplicación, actualizando dinámicamente el contenido mostrado sin necesidad de recargar la página.
Sintaxis básica:
<a [routerLink]="['/ruta']">Ir a Ruta</a>Explicación detallada:
Cuando un usuario hace clic en un enlace que utiliza RouterLink, Angular intercepta el evento de clic y navega a la ruta correspondiente. Esto incluye:
- Actualización de la URL del navegador.
- Renderizado dinámico del componente asociado a la ruta.
- Sin recarga de página.
Parámetros importantes de RouterLink
| Parámetro | Tipo | Descripción |
|---|---|---|
routerLink
|
Array o String | Define la ruta a la que se quiere navegar. Puede ser relativa o absoluta. |
queryParams
|
Object |
Permite agregar parámetros de consulta (queryParams) a la URL.
|
fragment
|
String | Añade un fragmento (#sección) a la URL. |
routerLinkActive]
|
String | Define una clase CSS que se aplica cuando la ruta está activa. |
Ejemplos prácticos de uso de RouterLink
Navegación básica
<a [routerLink]="['/home']">Ir a Inicio</a>Navegación con parámetros
<a [routerLink]="['/producto', idProducto]">Ver Producto</a>Añadiendo queryParams
<a [routerLink]="['/busqueda']" [queryParams]="{ categoria: 'libros', pagina: 1 }">Buscar Libros</a>Usando RouterLinkActive
<a [routerLink]="['/perfil']" routerLinkActive="active">Perfil</a>
Esto aplicará la clase active al enlace si la ruta actual es /perfil.
Recursos oficiales
Para más información, consulta la documentación oficial de Angular sobre el enrutamiento.
Jorge García
Fullstack developer