最近将我们当前项目的一些模板迁移到Angular 17的新控制流语法后，我觉得分享一些见解能够帮助一些人顺利过渡到这种新语法，为每个控制流结构提供清晰和明确的示例。所以，让我们开始吧。
传统指令与Angular 17的控制流语法对比
让我们使用一些示例来比较传统指令和Angular 17的控制流语法：
- *ngIf指令 vs @if控制块
Before（传统 *ngIf）：
代码语言：html复制<div *ngIf="isLoggedIn">
Welcome back, user!
</div>After（Angular 17的 @if）：
代码语言：html复制<div> @if (isLoggedIn) { Welcome back, user! } </div>- *ngIf指令和async管道 vs @if和async
Before（带有 *ngIf 的 async 管道）：
代码语言：html复制<div *ngIf="user$ | async as user">
Hello, {{ user.name }}!
</div>After（Angular 17的 async 和 @if）：
代码语言：html复制<div> @if (user$ | async as user) { Hello, { {user.name} }! } </div>- *ngFor指令 vs @for控制块
Before（传统 *ngFor）：
代码语言：html复制<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>After（Angular 17的 @for）：
代码语言：html复制<ul>
@for (let item of items) {
<li> { {item} } </li>
}
</ul>- ngSwitch指令 vs @switch控制块
Before（传统 ngSwitch）：
代码语言：html复制<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）：
代码语言：html复制<div>
@switch (userRole) {
@case 'admin': { <span>Admin Access</span> }
@case 'user': { <span>User Access</span> }
@default: { <span>Guest Access</span> }
}
</div>Angular 17引入的新模板控制块
使用 @defer 进行模板的延迟加载：
代码语言：html复制<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腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
