Parámetros de ruta con routerLink en Angular

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:01

Parámetros de ruta con routerLink en Angular

Curso de Angular 4

Clase 28 de 80

Clase 28 / 80

Recursos

Domina la navegación al detalle en Angular con parámetros de ruta. Aquí verás cómo enviar el ID de un elemento desde la vista de lista y capturarlo en el componente de detalle usando routerLink y ActivatedRoute. El flujo es claro y práctico: configura la ruta con parámetro, enlaza cada elemento con su ID y lee el valor para mostrar el detalle.

¿Cómo preparar las rutas con parámetros en Angular?

Para mostrar la información específica de un lugar, cada elemento necesita un identificador numérico. Se agregó un ID incremental en lugares.component.ts. Luego, la ruta de detalle se configuró para recibir ese parámetro en app.module.ts usando una ruta con parámetros de ruta.

Agrega un ID numérico a cada lugar.
Define la ruta con el parámetro obligatorio.
Recarga y prueba desde el navegador.

Ejemplo de rutas en app.module.ts:

import { Routes } from '@angular/router';
import { DetalleComponent } from './detalle/detalle.component';

const routes: Routes = [
  { path: 'detalle/:id', component: DetalleComponent },
  // otras rutas...
];

Prueba provisional en app.component.html para validar la navegación con parámetro:

<a routerLink="/detalle/1">Detalle 1</a>

Claves prácticas:

Los parámetros no son opcionales cuando la ruta los define. Intentar ir a detalle sin :id marca error.
Si notas que no se reconoce la ruta de detalle, verifica que el parámetro esté presente.

¿Cómo capturar el id con ActivatedRoute en el componente de detalle?

Para leer el parámetro que llega por la URL, se usa ActivatedRoute en detalle.component.ts. Con snapshot.params accedes al valor actual y puedes confirmarlo con console.log.

Importa ActivatedRoute desde Angular Router.
Inyecta la dependencia en el constructor.
Lee el parámetro con snapshot.params y valida el valor.

Código en detalle.component.ts:

import { ActivatedRoute } from '@angular/router';

export class DetalleComponent {
  constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.params['id']);
  }
}

Buenas prácticas:

Asegura que el nombre del parámetro coincida con el definido en la ruta: id.
Úsalo para cargar el detalle correspondiente.

¿Cómo enlazar cada lugar con routerLink y evitar rutas relativas?

Cada elemento de la lista debe enviar su ID en el enlace. En lugares.component.html se agregó un link por elemento con routerLink y la interpolación del ID. Inicialmente se construyó como lugares/detalle/1 por estar en una ruta relativa, lo cual causó error. La solución fue usar ruta absoluta anteponiendo una diagonal.

Usa routerLink con el ID de cada lugar.
Evita rutas relativas agregando / al inicio.
Valida que cada enlace navegue al detalle correcto.

Ejemplo en lugares.component.html:

<li *ngFor="let lugar of lugares">
  <a routerLink="/detalle/{{ lugar.id }}">Ver detalle</a>
</li>

Ejemplo mínimo de datos en lugares.component.ts con ID incremental:

lugares = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  // ...
];

Qué consolidaste:

Envío de parámetros de ruta desde un componente a otro.
Lectura del ID con ActivatedRoute en el componente de detalle.
Diferencia entre ruta relativa y ruta absoluta en routerLink.
Depuración rápida con console.log para validar parámetros.

¿Te quedó alguna duda sobre rutas con parámetros o quieres ver también parámetros tipo query en Angular? Cuéntame en los comentarios qué caso necesitas resolver.