En este punto, es posible que ya haya oído hablar de los componentes dinámicos, que son muy útiles para crear aplicaciones más dinámicas. Nos permiten cargar componentes dinámicamente en tiempo de ejecución según alguna lógica personalizada sin tener que crear un componente que esté inflado con un montón de ngIf.

Si aún no ha oído hablar de los componentes dinámicos, le sugiero que vea esta charla de Shmuela Jacobs en Angular Connect:

En mi trabajo diario, estoy construyendo un sistema que es como un CRM que administra varios productos diferentes que tienen una parte central común pero también algunas cosas específicas del producto. Para hacer que los componentes sean más reutilizables, introduje componentes dinámicos aquí y allá que cargan el componente específico del producto correcto según un token de inyección que especifica el producto activo actual. Todo fue agradable y bueno, hasta que traté de refactorizar un flujo de pasos que tiene algunos pasos comunes, pero también algunos pasos específicos del producto. Esto fue un problema porque el flujo de pasos no solo se basa en componentes, sino que también depende de las rutas. Lo que significa que el flujo de pasos de un producto puede tener algunos pasos adicionales, es decir, rutas, que son diferentes a los demás. El número de pasos también puede variar.

Una solución sucia sería crear un número fijo de rutas denominadas: paso 1, paso 2, paso 3 y luego cargar el componente dinámicamente en cada paso, pero dado que el número de pasos varía, esto no es posible. La solución adecuada es utilizar el enrutamiento dinámico .

Por lo general, definimos las rutas de un módulo de forma muy estática en un módulo de enrutamiento como este:

Una vez cargado el módulo no hay lógica que pueda interferir en la asignación estática de las rutas, por lo que siempre existirá la ruta de origen y nada más.

Ejemplo

Veamos un ejemplo muy simplificado que puede no tener mucho sentido pero tiene el propósito de demostrar cómo funciona el enrutamiento dinámico:

Queremos crear una aplicación con las siguientes rutas:

• Inicio (estático)
• 404 No encontrado (estático)
• Día (dinámico; solo disponible entre las 6 a. m. y las 6 p. m.)
• Noche (dinámico; solo disponible entre las 6 p. m. y las 6 a. m.)
• Secreto (dinámico; probabilidad 50/50)

Ahora que definimos nuestras rutas en la sección de proveedores, podemos hacer uso del objeto de definición de proveedor useFactory . De esa manera podemos pasar una fábrica que contiene la lógica que decide cómo deben verse las rutas.

Breve recordatorio: Si cargó el módulo a las 5:59 a. m. y espera hasta las 6:01 a. m., la ruta del día no estará disponible ya que la configuración de la ruta ya se realizó antes. Esto significa que la lógica que define las rutas solo ocurre una vez cuando se carga el módulo.

Conclusión

Espero poder mostrarte algo nuevo e interesante. Si está interesado en Angular, consulte mis otras publicaciones de blog en Medium.

El ejemplo completo está disponible en mi GitHub: