Routing en Angular: Guía completa: Parte 4

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 observablesSi te perdiste la parte anterior, aquí la tienes.

En esta 4ª parte vamos a aprender a trabajar con query paramsentre 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.


      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, '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:


      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, 'edit', 'q=']">

En lugar de eso, debemos usar una propiedad del routerLink que también es susceptible de ser vinculada con property binding: la propiedad queryParamsque espera un objecto de JavaScript (en adelante, JS), donde definiremos key-value pairs de los parámetros que queremos añadirPor ejemplo:

  • key = allowEdit
  • value = 1

      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, 'edit']" [queryParams]="{allowEdit: '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 &,


      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, 'edit']" [queryParams]="{allowEdit: '1', allowDelete: '2'}">

mostrando la URL http://localhost:4200/servers/3/edit?allowEdit=1&allowDelete=2

Yo lo voy a dejar como estaba antes:


      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, 'edit']" [queryParams]="{allowEdit: '1'}">

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.


      <a href="#" class="list-group-item list-group-item-action" *ngFor="let server of servers"
        [routerLink]="['/servers', 3, 'edit']" [queryParams]="{allowEdit: '1'}"
        fragment="loading">

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.


<button class="btn btn-dark" (click)="onLoadServer(8)">Load server nº8</button>

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 navigateen 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 pairpor 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:

navigate (array['segmento1', 'segmento2'], {queryParams: { key: 'value' }, fragment: 'value'})

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

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

angular the complete guide - curso Max S.

  Max Schwarzmüller

curso angular fernando herrera

   Fernando Herrera

Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:

libro 1 angular
libro 2 angular

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

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Guía de iniciación al data binding en Angular
¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos[...]
Claves para entender Angular – Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

2 comentarios en «Routing en Angular: Guía completa: Parte 4»

  1. Excelente los 4 apartados, excelente descripción, muy buena la explicación! GRACIAS!

    PD: Hoy está de cumpleaños el post 🙂

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar