Tengo mi código como se indica a continuación en app.component.html , es decir, tan pronto como el usuario llega a la pantalla de inicio; Quiero cargar de forma diferida la app-image-gallery y app-users-list y quiero cargarlos con algún efecto Shimmer o Loader tan pronto como el usuario llegue a la ventana gráfica de ese componente en particular. Casi todos los sitios para adultos usan esto, pero esto es un poco difícil de encontrar para Angular.
He leído muchos artículos sobre la carga diferida del componente al hacer clic en el botón, pero no he encontrado esta cosa implementada en ninguna parte.
aplicación.componente.html
<app-navbar></<app-navbar> <app-image-gallery></app-image-gallery> //list of images from backend <app-users-list></app-users-list> //users list from backend <app-faq></app-faq>ACTUALIZACIÓN (2022) : después de mucha investigación, encontré estos increíbles paquetes para la carga diferida de componentes de Angular porque los paquetes como @herodevs/hero-loader y ngx loadable están obsoletos para las versiones más nuevas de angular. También adjuntaré el enlace a sus artículos-
@angular-extensiones/elementos
Artículos-
@angular-extensiones/elementos
Estos paquetes son adecuados para las versiones de Angular 9+. Espero que esto ayude a alguien. Y supongamos que si desea cargar componentes en desplazamiento, On Scroll Load , esto es lo que está buscando y cada solución está completamente probada.
Esta solución se ha probado con angular 9 y superior con ivy .
Si está utilizando una versión anterior de pago angular, consulte este artículo: https://pretagteam.com/question/load-new-modules-dynamically-in-runtime-with-angular-cli-angular-5
Solución angular 9+:
Antes de comenzar, debe asegurarse de que sus componentes de carga diferida estén en un módulo separado que no se importe en el módulo de su aplicación.
Primero, debe elegir un elemento contenedor y marcarlo con una variable de plantilla para representar su componente perezoso dentro de él. Algo como:
<div #container></div>Y luego, en su clase de componente, debe consultar este contenedor usando @ViewChild como ViewContainerRef :
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;Ahora está listo para la carga diferida de su componente utilizando la importación dinámica del paquete web. que por defecto está disponible en una aplicación angular.
Luego, deberá resolver la fábrica de componentes utilizando el ComponentFactoryResolver angular después de inyectarlo en su constructor de componentes.
Y al final, solo representará la fábrica de componentes en la referencia de vista que ha preparado this.container :
lazyLoadAppImageGallery() { import('path/to/your/app-image-gallery-component') .then(({AppImageGallery}) => { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(AppImageGallery); const { instance } = this.container.createComponent(componentFactory); }); }Una vez que haya renderizado su componente, es posible que desee pasarle algunos datos. Podrías usar la instancia para esto:
instance.propertyName = someValueConsulte este buen artículo para obtener más información: https://medium.com/@ckyidr9/lazy-load-feature-modules-without-routing-in-angular-9-ivy-220851cc7751
Actualizar
Aquí hay una solución de trabajo con representación dinámica en desplazamiento
https://stackblitz.com/edit/angular-ivy-megwrz
Si puede usar la carga diferida con rutas, simplemente revise la documentación angular simple
https://angular.io/guide/lazy-loading-ngmodules
También puedes combinar ambas soluciones. En caso de que desee cargar dinámicamente un componente en un módulo de carga diferida cargado por ruta.