Angular新defer块中on与when的区别是什么？

when：基于布尔条件触发加载 #

when通过布尔表达式控制延迟内容的加载时机。只有当括号内的表达式结果为true时，Angular才会加载@defer块里的组件、管道等资源，并渲染对应内容。

比如你给出的示例：

<span appFoo>
  {{ 'foo' | upperCasePipe }}
 </span>
}

这里的isReady是一个布尔变量，通常由业务逻辑（比如数据请求完成、某个状态变更）控制其值。一旦isReady变为true，延迟内容会自动加载并展示，无需用户手动触发。

on：基于事件触发加载 #

on则依靠特定事件触发加载逻辑。它监听预设的事件类型（比如用户交互interaction、鼠标悬停hover、元素进入视口viewport等），只有当对应事件发生时，才会启动资源加载和内容渲染。

看这个示例：

<span appFoo>
    {{ 'foo' | upperCasePipe }}
  </span>
} @placeholder {
  <button>Trigger loading!</button>
}

这里的on interaction表示：当用户与@placeholder中的按钮发生交互（比如点击、聚焦）时，才会加载@defer块内的内容，并用该内容替换占位按钮。这种加载完全由用户的操作行为触发。

核心差异总结 #

• when是逻辑驱动：满足代码中的布尔条件后自动加载
• on是用户行为驱动：等待用户完成指定操作后才加载

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