如何延迟加载主页的角组件

Question

我在app.component.html中有下面给出的代码，即用户一登录主屏幕；我想延迟加载CCD_ 2&app-users-list，并且希望在用户到达该特定组件的视口时立即加载具有某种Shimmer效果或Loader的组件。几乎每个成熟的网站都使用这个，但Angular很难找到这个东西。

我读过很多关于按钮点击时组件延迟加载的文章，但还没有发现这件事在任何地方实现。

app.component.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>

更新(2022(-经过大量的研究，我发现了这些很棒的组件角延迟加载包，因为像@herodevs/hero-loader&ngx可加载不推荐用于angular的较新版本。我还会附上他们文章的链接-

@角度延伸/元件

@法学家/ngx-lazy-el

ngx元素

文章-

@法学家/ngx lazy el

@角度延伸/元件

这些软件包适用于Angular 9+版本。我希望它能帮助到别人。假设你想在滚动加载组件，在滚动加载时，这就是你想要的，每个解决方案都经过了充分测试。

Answer 1

此解决方案已在angular 9及以上的ivy上进行了测试。

如果您使用的是旧版本的angular checkout本文：https://pretagteam.com/question/load-new-modules-dynamically-in-runtime-with-angular-cli-angular-5

Angular 9+解决方案：

在开始之前，你应该确保你的懒惰加载组件在一个单独的模块中，而不是导入到你的应用程序模块中。

首先，您需要拾取一个容器元素，并使用模板变量对其进行标记，以在其中呈现惰性组件。类似于：

<div #container></div>

然后在您的组件类中，您需要使用@ViewChild作为ViewContainerRef:来查询这个容器

@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;

现在，您可以使用webpack动态导入延迟加载组件了。默认情况下可在angular应用程序中使用。

然后，在将组件工厂注入组件构造函数后，您需要使用angular ComponentFactoryResolver来解析它。

最后，您将在准备好的视图参考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);
});
}

渲染组件后，您可能需要将一些数据传递给它。你可以使用这个例子：

instance.propertyName = someValue

查看这篇漂亮的文章，了解更多信息：https://medium.com/@ckyidr9/lazy-加载-温度-模块-不带路由-角度9-ivy-220851cc7751

更新

这是一个在滚动上动态渲染的工作解决方案

https://stackblitz.com/edit/angular-ivy-megwrz

如果你可能会在路线上使用延迟加载，只需检查角度简单的文档

https://angular.io/guide/lazy-loading-ngmodules

您也可以将这两种解决方案结合起来。如果您想在通过路由加载的延迟加载模块中动态加载组件。

Angular v13以来的更新

由于v13 ComponentFactoryResolver已弃用。创建组件不需要解析组件工厂。由于Ivy引擎，您可以直接使用组件类。这意味着不写：

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(AppImageGallery);
const { instance } = this.container.createComponent(componentFactory);

你可以写：

this.viewContainerRef.createComponent(AppImageGallery);