如何延迟加载主页的 Angular 组件？

Question

我的代码如下所示app.component.html，即用户一登陆主屏幕；我想延迟加载app-image-gallery 和app-users-list，并希望在用户到达该特定组件的视口时立即使用一些微光效果或加载器加载它们。几乎每个成熟的网站都使用这个，但对于 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 年） - 经过大量的研究，我发现了这些用于 Angular 延迟加载组件的很棒的包，因为像 @herodevs/hero-loader 和 ngx loadable 这样的包已被新版本的 Angular 弃用.我还会附上他们文章的链接-

@angular-extensions/elements

@juristr/ngx-lazy-el

ngx-element

文章-

@juristr/ngx-lazy-el

@angular-extensions/elements

这些包适用于 Angular 9+ 版本。我希望它可以帮助某人。假设您想在滚动上加载组件，On Scroll Load，这就是您正在寻找的东西，并且每个解决方案都经过全面测试。

Answer 1

此解决方案已使用 ivy 使用 Angular 9 及更高版本进行了测试。

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

Angular 9+ 解决方案：

在您开始之前，您应该确保您的延迟加载组件位于一个单独的模块中，该模块未导入您的应用模块中。

首先，您需要选择一个容器元素并用template variable 标记它以在其中呈现您的惰性组件。 比如：

<div #container></div>

然后在您的组件类中，您需要使用@ViewChild 作为ViewContainerRef 查询此容器：

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

现在您已准备好使用webpack dynamic import 延迟加载您的组件。默认情况下在 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-load-feature-modules-without-routing-in-angular-9-ivy-220851cc7751

更新

这是一个在滚动时动态渲染的可行解决方案

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

如果您可能对路由使用延迟加载，只需查看 Angular 简单文档

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

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