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

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.

Luego lo inyectamos en el constructor de nuestro componente:

See the gist on github.

Finalmente podemos navegar a nuestra ruta:

See the gist on github.

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:

See the gist on github.

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