今年 11 月，我们将发布 Angular 版本 17，其中包含许多新的模板功能，包括用于控制流和可延迟视图的新内置语法。新的声明性控制流将NgIf 、 NgFor和NgSwitch的功能引入框架本身，并且可延迟视图允许模板延迟加载依赖项，以响应一个或多个可配置的触发条件。这是我们对 Angular 模板所做的最重大的改变，我们正在努力对这些功能进行最后的修饰。

以下是新功能的预览：

@if (user.isHuman) {
  <human-profile [data]="user" />
} @else if (user.isRobot) {
  <!-- robot users are rare, so load their profiles lazily -->
  @defer {
    <robot-profile [data]="user" />
  }
} @else {
  <p>The profile is unknown!
}

@是哪里来的？

如果您完全遵循 Angular 的RFC流程，您可能已经阅读了我们关于控制流和可延迟视图的建议。我们在 6 月份共享了这两个 RFC，以收集社区对我们设计的各个部分（包括模板语法）的反馈。您可能还会注意到，上面的示例与这些 RFC 不匹配，这些 RFC 使用了我们所说的“#-syntax”——类似 HTML 的标签，例如{#if} 、 {:else}和{/if} 。发生了什么？

在 RFC 期间，我们收到了有关功能本身的重要积极反馈，以及有关语法本身的各种意见。这并不意外，因为语法可以激发开发人员的热情。但随着 RFC 的进展，出现了一种真正受欢迎的替代想法。我们称之为“@-syntax”，它大致类似于上面的例子。据我们估计，@-syntax 大致与 #-syntax 一样流行，甚至可能更流行一些。

为了响应 RFC 反馈，我们对设计进行了细微调整，但评估对语法的这种根本性改变需要时间。在两个 RFC 的结束摘要中，我们总结了主要差异，并致力于收集更多数据，以便正确考虑社区提出的替代方案。

基于证据的决策

我们的目标是量化两种语法替代方案的可读性、可写性和整体开发人员体验。在过去的几个月里，我们从我们的团队、GDE 专家社区以及 Google 的 Angular 开发人员那里收集了反馈。我们在年度开发者调查中纳入了有关语法选择的问题。我们还与用户研究国际合作设计并开展了一项用户体验研究。

我们收集了这些努力的所有结果，并且数据是决定性的：在我们所有的民意调查和研究中，Angular 和非 Angular 开发人员都更喜欢 @-syntax 的社区提案，而不是最初的 # -句法。

该图表说明了对我们的年度调查做出回应的数千名开发人员的偏好：

我们的用户研究数据相似，超过 70% 的参与者更喜欢@而不是# (n = 14)。参与者提供了各种反馈来支持他们的选择，并指出 @-syntax 的简单结构及其与 TypeScript 和其他编程语言的相似性是重要的积极因素。他们指出的主要缺点是缺乏关闭}上下文，使得很难判断哪个块正在被关闭。我们认为良好的 IDE 工具将在这个领域发挥作用。

除了定量分析之外，团队还进行了技术分析，以了解解析、与现有模板的兼容性以及@-语法的其他方面的限制。我们确定了两个可解决的问题：

1. 如果省略条件表达式周围的括号等，我们的模板解析器很难区分对象文字和启动块的{ 。我们现在通过要求括号来解决这个问题，并将在将来投资于解析器的改进。
2. 模板中现有的@和}作为文字字符的用法需要通过迁移进行转义。根据我们对 Google 代码库的初步调查，我们预计这些字符的实例很少见。

这两个挑战都是可以解决的。

总之，我们相信我们的社区和我们收集的数据：Angular v17 将使用 @-syntax 来控制流和可延迟视图。

十一月见！

原文链接：https://blog.angular.dev/meet-angulars-new-control-flow-a02c6eee7843