Angular同一页面多视口下@defer按需触发的实现及代码示例

可以实现同一页面中多个视口各自独立触发@defer加载。你遇到所有@defer初始就执行的问题，通常是因为未给每个@defer指定专属的视口目标——默认情况下@defer监听的是整个文档的视口，导致只要组件在文档视口范围内（哪怕嵌套在滚动容器里）就会触发加载。

核心解决思路 #

使用@defer的viewport触发器，并通过target参数绑定到对应的滚动容器（独立视口），让组件仅在进入该容器的可视区域时才开始加载。

代码示例 #

假设页面存在两个独立滚动视口，分别延迟加载ComponentA和ComponentB：

模板代码 (app.component.html)

<!-- 第一个独立视口 -->
<div id="viewport-1" class="scroll-viewport">
  <h3>视口1</h3>
  @defer (viewport(target: '#viewport-1')) {
    <app-component-a></app-component-a>
  } @placeholder {
    <div class="loading-state">等待进入视口...</div>
  }
</div>

<!-- 第二个独立视口 -->
<div id="viewport-2" class="scroll-viewport">
  <h3>视口2</h3>
  @defer (viewport(target: '#viewport-2')) {
    <app-component-b></app-component-b>
  } @placeholder {
    <div class="loading-state">等待进入视口...</div>
  }
</div>

样式代码 (app.component.css)

.scroll-viewport {
  width: 450px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  margin: 2rem 0;
  padding: 1rem;
}

.loading-state {
  padding: 2rem;
  text-align: center;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 4px;
}

关键注意事项 #

• 确保使用Angular 16及以上版本（@defer是Angular 16引入的特性）
• 滚动容器必须设置overflow: auto或overflow: scroll，才能成为独立视口
• target参数的选择器需精准匹配容器元素，避免触发逻辑错误
• 可通过rootMargin参数调整加载触发阈值，例如viewport(target: '#viewport-1', rootMargin: '30px')表示组件距离视口30px时提前开始加载

内容的提问来源于stack exchange，提问作者jbali amine