问题标签 [angular-lazyloading]

我的代码如下所示，app.component.html即用户一登陆主屏幕；我想延迟加载app-image-gallery&app-users-list并希望在用户到达该特定组件的视口时立即使用一些 Shimmer 效果或 Loader 加载它们。几乎每个成熟的网站都使用它，但对于 Angular 来说，这东西有点难找。

我已经阅读了许多关于在单击按钮时延迟加载组件的文章，但还没有发现这个东西在任何地方都可以实现。

app.component.html

更新（2022 年） - 经过大量研究后，我发现这些用于 Angular 延迟加载组件的很棒的软件包，因为像@herodevs/hero-loader和ngx loadable这样的软件包已被较新版本的 Angular 弃用。我还将附上他们文章的链接-

@角扩展/元素

@法学家/ngx-lazy-el

ngx 元素

文章-

@法学家/ngx-lazy-el

@角扩展/元素

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

我正在学习 Angular，作为一个实践项目，我正在为 Docker 容器提供的 Wordpress API 开发前端界面（角度为 13）。

Angular 应用程序必须显示从 API 获得的所有帖子的列表，并且通过使用路由，一旦单击帖子，/post/:id:/:slug/ 中的 /post/:id:/:slug/ 应该只显示请求的帖子。

我的项目代码：https ://www.temporary-url.com/3BD84

我最新的更改/提交，以实现延迟加载：https ://www.temporary-url.com/08C

应用看起来像这样：

这些是所谓的一些日志：

当点击一篇文章（例如标题为 Hello World 的文章）时，地址栏中的 url 会正确更改为 host:port/post/1/hello-world 并调用以下内容：

• 但页面的内容不会改变。不显示点击的帖子（单独）。我想有一些路由问题，但一直无法找到它。我究竟做错了什么？

注意- 我已经有 6 个组件HomeComponent，其中一些是基于外部库的，它们运行良好。我只在延迟加载大量基于FormsModule. 我想延迟加载我的 ContactUsComponent 而不导入ContactUsModule任何地方。

我的contact-us.module.ts长相是这样的——

我想延迟加载ContactUsComponentin home.component.tsusing ComponentFactoryResolver. 但是ContactUsModule在我的HomeModule.

home.component.ts

home.component.html

我们的应用程序已设置好，因此导航到一组特定路线的用户会延迟加载，如下所示：

我们使用路由器链接导航到这些延迟加载的组件之一，如下所示......

我注意到单击此图块时，路径+延迟加载的组件会尝试加载。最初传入的是正确的状态。但是，组件立即被销毁，然后组件再次加载，状态未定义！（加载时没有状态数据，但加载正确的组件）。问题是为什么组件在第一次渲染时会重新加载和销毁自己？这可能是路由器插座或延迟加载组件的问题吗？我们的延迟加载组件的路由器出口在 Cmp1 中定义。

正如我在标题中已经描述的那样，我有一些样式和脚本，我只想在一个特定组件上加载，但这会导致视图出现故障，看起来页面在加载 css 之前显示。有没有办法调整这段代码，首先加载所有css然后显示页面，防止故障发生？

https://stackblitz.com/edit/angular-ivy-sjspyx?file=src/app/app.component.ts

我真的很感激能解决这个问题。

谢谢你。