过渡到 Angular 17 的新控制流语法

最近将我们当前项目的一些模板迁移到Angular 17的新控制流语法后，我觉得分享一些见解能够帮助一些人顺利过渡到这种新语法，为每个控制流结构提供清晰和明确的示例。所以，让我们开始吧。

传统指令与Angular 17的控制流语法对比

让我们使用一些示例来比较传统指令和Angular 17的控制流语法：

1. *ngIf指令 vs @if控制块

Before（传统 *ngIf）：

<div *ngIf="isLoggedIn">
  Welcome back, user!
</div>

After（Angular 17的 @if）：

<div> @if (isLoggedIn) { Welcome back, user! } </div>

1. *ngIf指令和async管道 vs @if和async

Before（带有 *ngIf 的 async 管道）：

<div *ngIf="user$ | async as user">
  Hello, {{ user.name }}!
</div>

After（Angular 17的 async 和 @if）：

<div> @if (user$ | async as user) { Hello, { {user.name} }! } </div>

1. *ngFor指令 vs @for控制块

Before（传统 *ngFor）：

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

After（Angular 17的 @for）：

<ul>
  @for (let item of items) {
    <li> { {item} } </li>
  }
</ul>

1. ngSwitch指令 vs @switch控制块

Before（传统 ngSwitch）：

<div [ngSwitch]="userRole">
  <span *ngSwitchCase="'admin'">Admin Access</span>
  <span *ngSwitchCase="'user'">User Access</span>
  <span *ngSwitchDefault>Guest Access</span>
</div>

After（Angular 17的 @switch）：

<div>
  @switch (userRole) {
    @case 'admin': { <span>Admin Access</span> } 
    @case 'user': { <span>User Access</span> } 
    @default: { <span>Guest Access</span> }
  }
</div>

Angular 17引入的新模板控制块

使用 @defer 进行模板的延迟加载：

<div>
  @defer (loadExpensiveComponent) {
    <app-expensive-component></app-expensive-component>
  }
</div>

请确保查看《可推迟视图》文档，了解有关 @defer 块及其提供的触发条件如何使用的更多信息。

迁移提示

• 从简单组件开始：逐渐转移到更复杂的组件。
• 使用自动迁移：使用 Angular v17 CLI 的迁移命令。ng g @angular/core:control-flow或者更好的方式是分步进行。ng g @angular/core:control-flow --path=./src/component-to-be-migrated
• 转义 {、} 和 @ 字符：在模板中，现有的 {、} 和 @ 字符作为文本字符使用时需要进行转义。
• 手动细化：手动优化复杂模板，以最佳方式使用新语法。例如，在某些情况下，您可以使用 @defer 块来延迟加载内容。

向后兼容性和性能

Angular 17允许您在应用程序中同时使用新旧语法。就性能而言，值得一提的是，Angular团队观察到使用新语法时达到了高达90%的速度性能改进。

结论

Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法，承诺会使我们的代码更易读、易维护和高性能。

正如我们在自己的项目中所经历的，这些变化不仅是外观上的改变，而且是功能上的改变，提升了我们使用Angular的方式。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！