如何在同一页面多次使用角度组件中的@defer

Question

我可以在同一页面的多个视口上使用@defer吗？当我使用它时，所有的 defer 同时工作，而不是等待进入视口来执行。它们一开始都会被触发。

我可以为每一个使用延迟吗？ 当每个组件进入视口时加载它？

我怎样才能实现这个目标？请提供一个代码示例以进行简单的回复。

Answer 1

您可以使用此模板：

<app-text/>

@for (n of [1,2,3]; track $index) {
  @defer (on viewport) {
    <app-text/>
  } @placeholder {
    <p>loading...</p>
  }
}

要创建

app-text

，您可以运行

ng g c text

并在模板中插入足够的内容来填充视口。

如果您使用 VS Code，则可以键入 Emmet 缩写，例如

lorem1000

，然后按 TAB 或 ENTER。这将使用 Emmet 的“Lorem Ipsum”生成器生成 1000 个单词。

向下滚动时，您应该看到滚动条手柄向上跳跃。