-1

我的代码如下所示，app.component.html即用户一登陆主屏幕；我想延迟加载app-image-gallery&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 年） - 经过大量研究后，我发现这些用于 Angular 延迟加载组件的很棒的软件包，因为像@herodevs/hero-loader和ngx loadable这样的软件包已被较新版本的 Angular 弃用。我还将附上他们文章的链接-

@角扩展/元素

@法学家/ngx-lazy-el

ngx 元素

文章-

@法学家/ngx-lazy-el

@角扩展/元素

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

4

1 回答 1

2

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

如果您使用的是旧版本的角度检出这篇文章： 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-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

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

于 2021-12-08T15:56:34.533 回答