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í:

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:

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:

Luego lo inyectamos en el constructor de nuestro componente:

Finalmente podemos navegar a nuestra ruta:

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:

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í.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *