Angular 17 - 如何在 for 循环内创建一些加载？

Question

我有一个网站，是我的 Youtube 的视频库，该视频是在 iframe 标签中构建的。 但我想在这个 for 循环中使用一些加载，因为当我打开页面时加载很慢。 我做什么？

我的代码：

`@for (link of youtubeLinks; track $index) {
    <div class="video-container mx-1 mb-2">
      <iframe #youtubeVideos 
              width="315" 
              height="560" 
              [src]="getVideoSrc(link)" 
              frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
               allowfullscreen>
       </iframe>
    </div>
 }`

我使用了 @defer 指令，但不起作用。

我希望每个 iframe 在页面滚动时加载，或者一次加载每个 iframe，而不是在进入页面后立即加载所有 iframe。

Answer 1

你可以使用@defer，但是如果你仔细阅读文档你会注意到

一种块类型，可用于 延迟加载组件模板内使用的组件、指令和管道的 JavaScript。

您的 iframe 元素与此描述不符。所以你应该做的是将 iframe 移动到一个单独的组件，然后使用 @defer 来包装你的组件

    @defer (on viewport) {
      <app-video [src]="link" [width]="width" [height]="height"/>
    }
    @placeholder { 
      <div [style.width.px]="width" [style.height.px]="height">Loading...</div>
    }

设置 iframe 的占位符大小非常重要，否则所有视频占位符都将出现在视口上，这将导致每个视频立即加载。因此，您应该通过等于 iframe 的固定大小的占位符在页面上预留位置。

这样，当您打开页面时，您首先会看到占位符，然后角度看到第一个占位符位于视口上，这将触发第一个组件加载，然后当您滚动到第二个时 - 相同的场景适用等。

结果：

https://stackblitz.com/edit/stackblitz-starters-y1wozs?file=src%2Fmain.ts