如何在Angular 2中延迟加载模板的一部分？

Question

我有一个Angular 2组件，它包含多个子组件。对于其中的一些，加载它们是相当昂贵的，有时根本不需要加载它们。例如，如果用户没有滚动那么远。

无论如何，我知道如何延迟加载路由，但有没有一种延迟加载模板的方法？仅当元素在Viewport中或附近时才会像？

Answer 1

您可以将要显示的子组件分离或分组为较小的组件以便一起加载。 为了减少加载时间， 1.尝试将较小的模板内联到组件文件中。 2.在模板中使用* ngIf指令，可以避免渲染模板，并且不会创建组件实例。但是，请注意，如果您使用* ngIf，最好只使用DOM不经常刷新，否则您可以创建DOM并通过将其与DOM的[hidden]属性绑定来使用该组件

Answer 2

无法延迟加载模板。你可以做的是延迟加载模块。 How to manually lazy load a module?

如果您使用ViewContainerRef.createComponent()（请参阅Angular 2 dynamic tabs with user-click chosen components作为示例）动态添加您想要展示的组件，如果用户滚动得足够远，它可能会起作用（尚未尝试过） ）。