Retomamos esta guía sobre el routing después de dar los pasos básicos para crear rutas y adentrarnos brevemente en el mundo de los observables. Si te perdiste la parte anterior, aquí la tienes.
En esta 4ª parte vamos a aprender a trabajar con query params, entre otras muchas cosas. ¡Vamos allá! 
Cómo pasarle query params y fragmentos a nuestras rutas
A parte de los parámetros de una ruta que hemos visto, tipo http://localhost:4200/users/8/john, existen otros parámetros que podemos obtener de la URL, como los query params.
Los "query params" son los parámetros de consulta que se utilizan para comunicarnos con una base de datos y solicitarle información.
Query significa "consulta".
Los query params se representan con un signo de interrogación para anunciar que a continuación viene una consulta, para después especificarle más detalles.
Se pueden unir varios query params con el signo &. Por ejemplo:
http://localhost:4200/users/8/john?mode=editing&[otro query param aquí].
Vamos a aprender a pasar query params a nuestra URL y obtenerlos de la misma URL.
También veremos cómo añadir fragmentos y obtenerlos de la URL, que sirven para ir a una parte específica de una página. Se representan con el símbolo de la almohadilla #. Por ejemplo:
http://localhost:4200/users/8/john?mode=editing#loading.
Vamos a aprender a hacer todo esto de dos maneras:
- con la directiva routerLink
- de manera programática, con el método navigate
Con la directiva routerLink
1. Añadimos una ruta más a nuestro app.module.ts que nos permita añadir un servidor, así que le añadimos un id como segmento dinámico + la parte edit, describiendo así lo que queremos que suceda en esa ruta. El componente vinculado a esa ruta será el EditServerComponent.
{ path: 'servers/:id/edit', component: EditServerComponent }
2. En el template del ServersComponent editamos la lista que muestra los servidores (el <a>).
Haremos lo mismo más adelante en el UsersComponent.
3. Añadimos la propiedad routerLink y la vinculamos con property binding a un array con varios segmentos. El primero será un absolute path a la ruta /servers. El segundo, un id estático (el que queramos) y el tercero, el segmento edit.
Si guardas y haces click en cualquiera de los nombres de la lista de servidores (Productionserver, Testserver o Devserver), verás que se muestra la URL http://localhost:4200/servers/3/edit. 
Supongamos que ahora queremos añadir un query parameter para decidir si un servidor puede ser modificado o no (en inglés, edit).
Sería incorrecto añadirlo como un fragmento más del array, tipo:
En lugar de eso, debemos usar una propiedad del routerLink que también es susceptible de ser vinculada con property binding: la propiedad queryParams, que espera un objecto de JavaScript (en adelante, JS), donde definiremos key-value pairs de los parámetros que queremos añadir. Por ejemplo:
- key = allowEdit
- value = 1
Verás que ahora al hacer click en cualquier servidor de la lista, la URL se actualiza a http://localhost:4200/servers/3/edit?allowEdit=1.
Puedes probar también a añadir otro key-value pair, y verás como se añade a la query de la URL, separada por el símbolo &,
mostrando la URL http://localhost:4200/servers/3/edit?allowEdit=1&allowDelete=2
Yo lo voy a dejar como estaba antes:
También tenemos la propiedad fragment, que espera un string. Tiene dos modalidades:
- modo con property binding: [fragment]="'loading'"
- modo sin property binding: fragment="loading"
Por simplicidad, a mí me gusta más sin property binding, así que así lo añado.
Verás que ahora cualquier URL al hacer click en un servidor de la lista se muestra así: http://localhost:4200/servers/3/edit?allowEdit=1#loading.
De manera programática
Veamos cómo hacerlo ahora de manera programática. 
1. Supongamos que queremos cargar únicamente un servidor, así que en la home page, en lugar de tener un botón que diga Load servers, vamos a cambiarlo por uno que diga Load server nº8, por ejemplo.
2. Cambiamos también el nombre del método onLoadServers por onLoadServer y le pasamos por parámetro el número del servidor ficticio.
3. Ajustamos el método en el home.component.ts, que espera un id como argumento.
4. En el método navigate, dejamos el primer segmento como está y añadimos como segundo segmento el id del parámetro y como último segmento, edit.
5. Le añadimos query params como segundo argumento del método navigate, en modo de objeto de JS (en inglés, JS object). Al igual que antes, query params es un JS object que debe escribirse como key-value pairs.
6. Le añadimos un key-value pair, por ejemplo, allowEdit: 8.
El método navigate también acepta fragments dentro del segundo argumento, así que le pasamos uno, por ejemplo, loading, para utilizar el mismo ejemplo de arriba.
onLoadServer(id: number) {
// complex code that connects to a backend
// navigation to Servers page
this.router.navigate(['/servers', id, 'edit'], { queryParams: { allowEdit: '8' }, fragment: 'loading' });
}
Aquí un esquemita para entendernos mejor:
Si guardamos y vamos a nuestro navegador, al hacer click sobre Load server nº8 verás que tu URL cambia a http://localhost:4200/servers/8/edit?allowEdit=8#loading. ¡Genial! 
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
¡FIN DE LA PARTE #4!
Y hasta aquí esta 4ª parte. En la siguiente entrega veremos cómo crear nested routes para configurar un estructura de rutas hijas (child routes), entre otras cosas. Por el momento, espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win .
Otros artículos que pueden interesarte
¡Muchas gracias Jesus! Me alegro de que te haya servido ?.
P.D.: Feliz cumple-post jeje.
Excelente los 4 apartados, excelente descripción, muy buena la explicación! GRACIAS!
PD: Hoy está de cumpleaños el post 🙂