差不多了。
我知道如何使用 rooter 加载组件，但假设我有一个带有谷歌地图的页脚组件。
我不希望它在第一次加载时被加载，因为用户不会看到它。
但我想在某个时候加载。
我该怎么做？
【问题讨论】：
*ngIf 是隐藏它直到某事。
*ngIf 实际上并不是“隐藏”它，而是从 DOM 中完全添加/删除它。
HostListener 来监视scroll 事件并检测您的项目何时即将进入查看。查看this implementation 了解虚拟化网格。另一种选择是intersection observer。看看ng-defer-load。
标签： angular components lazy-loading angular-components
这可能不在您的问题范围内，也可能不在您的问题范围内，但从 Chrome ~75 开始，将支持图像和 iframe 的本地延迟加载。根据 Addy Osmani（在 Chrome 上工作）的 blog post，可以使用 loading 属性启用延迟加载：
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
我不确定它什么时候发布用于生产，但我对这个新属性感到非常兴奋，因为这意味着我们将节省大量 JavaScript/TypeScript 代码，并减少对任何其他外部依赖项的需求.
不过，如果您想跟踪loading 属性的实施进度，请随时点击post。有很多关于它的讨论。
采用：
互操作性和兼容性
Firefox：没有公开信号
边缘：没有公共信号
Safari：一些公共支持 WebKit 开发人员拥有 提到苹果对这种功能很感兴趣，并且是 LazyLoad 规范拉取请求的审阅者。
Web 开发人员：积极 信号 WICG 上关于延迟加载图像的线程
【讨论】：