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:
this.route
: esActivatedRoute
inyectado en el constructornombreVariable
: la variable que definimos con dos puntos al configurar el routing de nuestra app
Si quieres más tutoriales de Angular puedes verlos aquí.