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
Relacionado:  Angular Router - Tutorial y ejemplo

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 579 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

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

A %d blogueros les gusta esto: