Angular 17 发布总结

Angular 是一个流行的单页应用（SPA）框架，最近发布了版本 17，引入了声明式块模板语法，并对框架文档和品牌进行了全面更新。

声明式块模板语法

Angular 17 引入了一种新的模板引擎命令，称为声明式块模板，其形式如下：

@command {
  <component>
}

内置控制流

首个实现是内置控制流，它简化了 for/switch/if 语句的使用。现有的 Angular 块模板语法通常让新开发者感到困惑，因为它冗长且将语句隐藏在 HTML 中，容易遗漏。例如：

<div [ngSwitch]="expression">
  <component-one *ngSwitchCase="valu1"/>
  <component-two *ngSwitchCase="value2"/>
  <default-component *ngSwitchDefault/>
</div>

相比之下，新语法将条件语句与组件分离，使其更易于理解：

@switch (expression) {
  @case ('value1') { <component-one/> }
  @case ('value2') { <component-two/> }
  @default { <user-dashboard/> }
}

尽管新语法看起来只是简单的体验改进，但它还提供了更好的类型检查、更小的包体积以及在使用 for 循环时的显著性能提升。内置控制流功能目前仍处于开发者预览阶段，因为内容投射方面仍存在一些不足。要在项目中启用此功能，可以在 CLI 中运行以下命令：

ng generate @angular/core:control-flow

可延迟视图

声明式块模板语法的第二项功能是可延迟视图，它通过提供一种声明式的方式来延迟模板的某些部分，替代了 ViewContainerRef。例如：

@defer {
  <deferred-component />
}  @placeholder {
  <div>Loading...</div>
}

@defer 命令接受一个可选的触发器，用于确定何时加载延迟组件。最常用的策略是 on viewport，即在组件进入视口时渲染：

@defer (on viewport) {
  <deferred-component />
} @placeholder {
  <div>Loading...</div>
}

相比之下，on idle 策略会在浏览器空闲时获取组件，这是默认行为：

@defer (on viewport; prefetch on idle) {
  <comment-list />
} @placeholder {
  <div>Loading...</div>
}

文档与品牌更新

Angular 团队对 Angular 品牌和文档站点进行了首次重大更新。自 2012 年 AngularJS 发布以来，Angular 品牌几乎没有变化，这次更新为旧品牌带来了现代感。新品牌是一个全新的文档站点，提供了更简单的入门流程、新的交互式教程和 playground。虽然现有开发者可能需要重新适应，但整体体验比旧站点更加流畅。

其他信息

有关完整的变化列表，请参阅 Angular GitHub 仓库中的官方发布说明。Angular 是 MIT 许可证下的开源软件。