Angular Router: parámetros en la ruta

Resumen: mostrar cómo configurar una ruta en el router de Angular para tener parámetros en la URL y leerlos después en otro componente, además de crear un enlace que va a otro componente con parámetros en la URL.

Declaración de rutas

Ya hice un tutorial sobre el Enrutador de Angular. Bien, en nuestras rutas debemos configurar indicar el parámetro o variable de la URL con dos puntos.

Por ejemplo, para enviar un id en la ruta sería ruta/:id algo así:

const routes: Routes = [
  { 
    path: "mascotas/editar/:id", // <-- Aquí
    component: EditarMascotaComponent 
  },
];

De este modo indicamos que recibiremos un id en la ruta.

Crear enlace para ir a esa ruta

Para crear un vínculo que lleva a esa ruta y pasarle un parámetro podemos hacer esto:

<a [routerLink]="['/mascotas/editar', mascota.id]">
Editar
</a>

En este caso indicamos primero la ruta en ["/mascotas/editar"] y el segundo elemento del arreglo es el valor.

Ir a otra ruta con parámetros desde TS

En el ejemplo anterior vimos cómo hacerlo desde la vista, pero desde TypeScript podemos hacer lo mismo. Importamos el Router:

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

Luego lo inyectamos en el constructor de nuestro componente:

constructor(private router: Router) { }

Finalmente podemos navegar a nuestra ruta:

this.router.navigate(['/mascotas', idMascota]);

Para lograrlo invocamos a navigate del router, le pasamos primero la ruta y después la variable, todo eso dentro del arreglo.

Obtener parámetros pasados por la ruta

Ahora en el componente que se encarga de responder a la URL con variables de Angular Router debemos importar ActivatedRoute e inyectarlo en el constructor:

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

export class EditarMascotaComponent implements OnInit {

  constructor(private route: ActivatedRoute) { } // <-- inyectar

  ngOnInit() {
    // Leer
    let idMascota = this.route.snapshot.paramMap.get("id");
  }

}

Para obtener el parámetro de la ruta invocamos a this.route.snapshot.paramMap.get("nombreVariable") en donde:

1. this.route: es ActivatedRoute inyectado en el constructor
2. nombreVariable: la variable que definimos con dos puntos al configurar el routing de nuestra app

Si quieres más tutoriales de Angular puedes verlos aquí.