Angular 17 中的控制流（Control Flow）

type

status

date

slug

summary

项目设置

在创建项目之前，首先需要确保安装了最新版本的 Angular cli。

之后创建一个新项目：

我们的示例模板代码内容如下：

效果图：

在应用加载时，会随机从 users、posts 和 photos 中获取一种数据。点击按钮会重新随机获取（数据来自 jsonplaceholder）。在获取过程中显示 No data or loading...，如果获取到 users 或者 posts，会渲染出列表，否则显示 Unknown Data Type...。

@if

首先让我们从替换 *ngIf 开始。

从模板代码中可以看到，我们使用 *ngIf 来判断当前是否有数据，有的话渲染对应的内容，没有的话渲染 #noData 模板。

使用新的内置语法替换之后如下：

与基于指令的 *ngIf 相比，有以下几个优点：

可以直接使用 @else，不需要声明额外的模板变量。

支持 @else if 语法，能够判断更多的情况，基于指令的写法是做不到的。

新的语法无须导入 CommonModule 或者 ngIf 指令，方便使用。

@switch

接下来我们替换 *ngSwitch。

我们在模板代码中，通过获取到的数据类型，来显示不同的内容。只支持 users 或者 posts，否则渲染 *ngSwitchDefault 部分。

使用新的内置语法替换之后写法如下：

新的语法有一个最大的优点就是可以做到类型收窄。

通过上面的图可以看到，在 @case ('posts') 分支下，typescript 能够推断出 payload 对应的类型为 Post[]，同理，如果我们查看 @case('users') 下的 payload，类型就是 User[]。这在 *ngSwitch 中是不可能做到的。