Angular 17延迟视图：能否在视口触发器中传入不同容器？

可以在Angular 17的@defer视口触发器中指定自定义容器，你给出的写法思路正确，但语法需要调整。

正确用法 #

@defer的viewport()触发器支持传入模板引用变量作为自定义容器，正确语法是on viewport(容器引用)，而非直接写on container。

修正后的代码示例 #

<div #container>
  @defer(on viewport(container)) {
    <item />
  } @placeholder {
    <div>Placeholder</div>
  }
</div>

原理说明 #

• 默认情况下，@defer(on viewport)监听浏览器全局视口
• 指定自定义容器后，Angular会监听该容器元素的可见区域，当延迟加载的内容进入这个容器的可视范围时，就会触发组件的加载与渲染
• 如果容器是带滚动条的容器（设置了overflow: auto或scroll），该触发器依然能正常工作，监听容器内部的滚动可见性

注意事项 #

• 模板引用变量#container必须绑定到有效的DOM元素，确保在模板中正确定义
• 该特性仅在Angular 17及以上版本中支持，需确认项目版本符合要求

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