如何延迟加载首页的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 的较新版本。我也会将 link 附加到他们的文章中-

@angular-extensions/elements

@juristr/ngx-lazy-el

ngx-element

文章-

@juristr/ngx-lazy-el

@angular-extensions/elements

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

Answer 1

此解决方案已通过 angular 9 及更高版本 ivy 测试。

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

Angular 9+解法：

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

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

<div #container></div>

然后在您的组件 class 中，您需要使用 @ViewChild as ViewContainerRef:

查询此容器

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

现在您已准备好使用 webpack dynamic import 延迟加载您的组件。默认情况下在 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);
       });
}

呈现组件后，您可能希望将一些数据传递给它。您可以为此使用该实例：