Rutas con parámetros en carga perezosa

En el artículo anterior vimos como se pasaban parámetros en las rutas cuando el componente llamado pertence a un módulo de carga directa, es decir, que ya está cargado en el navegador del cliente cuando se llama al componente deseado.

En este artículo vamos ver el mismo proceso cuando el componente al que queremos llamar pasándole parámetros se carga en diferido (lazy load).

En realidad, el proceso es el mismo. La diferencia está en la forma de establecer las rutas y los enlaces en los que se pasan parámetros, como vamos a ver en seguida.

Con estos dos modelos en mente, entiendo que, en lo sucesivo, no tendrás dificultades para crear rutas con parámetros, sea cual sea la forma de carga de tus componentes.

EL ENRUTADOR RAÍZ

Para ver mejor las muchas similitudes, y las pocas diferencias, vamos a hacer una cosa. El módulo de proveedores, que tenemos configurado para carga directa lo vamos a cargar en diferido. Esto, en sí, no supone mayor problema, teniendo en cuenta que, cuando creamos el módulo, lo hicimos con la opción --routing, así que ya tiene su propio enrutador. Si no fuera el caso, tendríamos que adaptar el módulo para que tuviera su enrutador interno. Ya hemos visto este proceso en este artículo pero, en este caso, ni siquiera necesitamos preocuparnos de esto.

Lo primero es abrir el app-routing.module.ts (el enrutador principal de la aplicación). Tenemos que buscar la línea siguiente:

import { SupplierDataComponent } from './suppliers/supplier-data/supplier-data.component';

Esta línea la eliminamos directamente. Puesto que el módulo de proveedores lo vamos a cargar ahora en diferido, ya no necesitamos (ni debemos) importar nada de ese módulo en el enrutador raíz.

A continuación buscamos la siguiente ruta:

{
  path: 'proveedores',
  component: SuppliersListComponent
},

y la sustituimos por:

{
  path: 'proveedores',
  loadChildren: './suppliers/suppliers.module#SuppliersModule'
},

Con esto ya tenemos el módulo de proveedores listo para cargarse en diferido, al menos por lo que al enrutador principal se refiere.

EL ENRUTADOR DEL MÓDULO

En el enrutador del módulo tenemos que crear dos rutas. La ruta principal, para acceder al compomente con la lista de proveedores, y una ruta en la que se defina un parámetro, de modo que, si se activa dicha ruta, se acceda al componente de los datos de proveedor, pasándole ese parámetro. El enrutador de este módulo (suppliers-routing.module.ts), queda así:

En primer lugar, observa las líneas 3 y 4, donde importamos los componentes del módulo, para poder acceder a ellos. Esto no es nada nuevo. Ya sabemos que los componentes de un módulo que se carga en diferido deben ser importados en su propio enrutador.

Ahora observa las rutas, en las líneas de la 7 a la 14. Si accedemos a la ruta vacía (lo que, dado que ya estamos en el módulo de proveedores corresponde a localhost:4200/proveedores), nos da paso al componente que muestra la lista de proveedores. Si accedemos a una ruta formada por un identificador (por ejemplo, localhost:4200/proveedores/3) nos da acceso al componente que muestra los datos de ese proveedor. Y esto, porque lo que haya a continuación de la ruta base de proveedores es tomado como un parámetro (por el signo : del path) y nos conduce a ese componente, pasándole esa parte de la ruta (el 3, en el ejemplo), como parámetro id. Hablaremos un poco más sobre este tema en este mismo artículo, pero esto nos funciona.

EN LOS COMPONENTES DEL MÓDULO

En los componentes del módulo tenemos que hacer unos cambios muy parecidos a los que hicimos en el artículo anterior. Para empezar, en la vista de la lista de proveedores (suppliers-list.component.html) debemos incorporar los enlaces a la ruta que se activa con un parámetro, así:

En el componente SupplierDataComponent cambiamos los archivos supplier-data.component.ts y supplier-data.component.html, así:

En esto no hay novedades. Como ves, el código empleado para recuperar el parámetro y pasarlo a la vista es el mismo que en el caso de los módulos en carga diferida.

Y SI…?

Y ¿qué ocurriría si debiéramos poder acceder, dentro de este módulo, a más de un componente al que pasarle el parámetro de identificación del proveedor?. Supongamos que, además del SupplierDataComponent, para ver los datos de un proveedor, tuviéramos un componente para modificar los datos de un proveedor, que se llamase, digamos, SupplierEditComponent. Vamos a crearlo:

ng g c suppliers/supplierEdit --export

(lo de --export es por si lo necesitamos en algún momento; por ahora, sólo lo ponemos, que «no pide pan»).

Tenemos que modificar el enrutador del módulo (suppliers-routing.module.ts), así:

Observa, en la línea 5, que importamos el componente que acabamos de crear.

La ruta para ver los datos de un proveedor ya no puede tener, en la propiedad path, sólo el parámetro. Como ahora hay dos rutas que pueden recibir ese parámetro, debemos poder distinguirlas, como ves en las líneas de la 12 a la 19.

La vista de la lista de proveedores (suppliers-list.component.html) también debe ser modificada, para tener dos enlaces por proveedor, cada uno con su ruta (uno para acceder a la vista de datos y otro para acceder a la vista de edición).

Además, en la lógica de negocio del nuevo componente también tenemos que capturar el parámetro, y mostrarlo en la vista.

Por último, como hemos modificado las rutas, agregando un nuevo nivel, también tenemos que modificar los enlaces de «Volver a la lista».

CONCLUYENDO

Para no hacer demasiado extenso este artículo, los últimos detalles de los enlaces no los he reproducido aquí. De todos modos, la aplicación completa (a excepción de las carpetas node_modules y e2e, que son siempre las mismas) la tienes en este enlace para descargar. Observa las vistas y las lógicas de negocio y, con lo que ya sabemos, no tendrás problemas para ver inmediatamente el funcionamiento. Te insisto en que esto todavía tiene algunas carencias. No te preocupes. Las iremos viendo y subsanando en los próximos artículos.

   

Deja un comentario