2023年11月8日 Angular 团队发布了 Angular 17 开发预览版，在新的版本，Angular 添加了许多激动人心的特性，其中就包含新的控制流和延迟视图
新版 Angular 增加一个 Block的概念，
Block是模板中的一种新语法结构，控制流和延迟视图也是基于这种语法结构来实现的。
控制流
什么是控制流？
控制流是指程序中决定语句执行顺序的机制。它通过顺序、选择（条件判断）、循环等结构，使程序能够根据不同条件或规则执行不同的代码块，实现灵活的逻辑控制，代码中常见的 if-else for 都属于控制流语法。
Angular 中的控制流
Angular 16 及之前的版本中的控制流是基于微语法和结构指令来实现的，比如：
<div *ngIf="condition; else elseBlock">Content to render when the condition is true.
</div>
<ng-template #elseBlock>Content to render when the condition is false.
</ng-template>
<ng-container [ngSwitch]="tab"><basic-info *ngSwitchCase="'basic'"></basic-info><attachment-list *ngSwitchCase="'attachment'"></attachment-list><version-list *ngSwitchCase="'version'"></version-list><invaild-tab *ngSwitchDefault></invaild-tab>
</ng-container>
<ng-container [ngSwitch]="tab"><ng-container *ngSwitchCase="'version'"><version-list></version-list></ng-container><ng-container *ngSwitchCase="'attachment'"> <attachment-list></attachment-list> </ng-container><ng-container *ngSwitchCase="'basic'"><basic-info></basic-info></ng-container><ng-container *ngSwitchDefault><invaild-tab></invaild-tab></ng-container>
</ng-container>
开发体验不好：
- 不够直观简洁
- 灵活度差
- 微语法模型也不支持控制流语句的多个关联子模板，所以 Angular 无法解决 *ngIf 的情况 else 使用起来非常尴尬的问题
- 独立组件需要引入
新的控制流
关注 Angular 的同学了解，Angular 一直在推动 Zoneless 和 Singals 的工作，Angular 中现有的基于 Zone 的控制流指令将无法在 Zoneless 的应用中运行的，在考虑修改现有指令以支持 Zoneless 应用时，Angular 团队决定不这样做，因为潜在的重大更改（需要兼容旧的应用程序）和代码复杂性增加。相反，他们选择引入一种新的内置控制流语法，该语法既支持无区域应用程序，又解决微语法长期存在的 DX（开发体验）问题。
语法
官方在 RFC 时候提出了 #-syntax 类似 HTML 的标签语法，如 {#if} 、 {:else} 和 {/if}
{#if cond.expr}Main case was true!
{:else if other.expr}Extra case was true!
{:else}False case!
{/if}
不过在 RFC 讨论阶段，大部分人更喜欢 @-syntax 的语法，最终 Angular 团队通过调查和研究发现，大部分人也都认可这个方案，最终确定了使用了 @-syntax 的语法
@if (cond.expr){Main case was true!
} @else {False case!
}
使用
IF-ELSE
<div class="status-label" *ngIf="status === 1; else invalid">正常</div>
<div class="status-label" *ngIf="status === 2; else invalid">进行中</div>
<div class="status-label" *ngIf="status === 3; else invalid">完成</div><ng-template #invalid><div class="status-label">无效状态</div>
</ng-template>
<div class="status-label">@if (status === 1) {正常} @else if (status === 2) {进行中} @else if (status === 3) {完成} @else {无效状态}
</div>@if (users$ | async; as users) {{{ users.length }}
}
Switch
<ng-container [ngSwitch]="tab"><basic-info *ngSwitchCase="'basic'"></basic-info><attachment-list *ngSwitchCase="'attachment'"></attachment-list><version-list *ngSwitchCase="'version'"></version-list><invaild-tab *ngSwitchDefault></invaild-tab>
</ng-container>
For Loop
默认的 trackBy
@Component({
template: `
<ng-container *ngIf=“users?.length > 0; else empty”>
<li *ngFor=“let user of users; trackBy: trackFn; let i = index”>
No.${{ i + 1 }} {{ user.name }}
<ng-template #empty>没有用户</ng-template>
`,
})
export class DemoComponent {
trackFn(index: number, item: Item) {
return item.id;
}
}
- @for (user of users; track user.id; let i = $index, e = $even) {
- No.${{ i + 1 }} {{ user.name }}
- } @empty { 没有用户 }
- @for (user of (users$ | async); track user.id; let i = $index, e = $even) {
- No.${{ i + 1 }} {{ user.name }}
- }
延迟视图
在 Angular 16 中如何实现延迟加载组件？
@Component({
template: <ng-container #viewContainer />,
})
export class OldLazyComponent implements AfterViewInit {
@ViewChild(‘viewContainer’, { read: ViewContainerRef })
viewContainerRef!: ViewContainerRef;
async ngAfterViewInit() {
const { DemoComponent } = await import(‘./demo/demo.component’);
const componentRef = this.viewContainerRef.createComponent(DemoComponent);
}
}
@defer
Angular 支持通过 Router 延迟加载应用程序的某些部分（延迟路由），单个组件的延迟加载可以通过 dynamic import() 和 ngComponentOutlet 实现，但这种方法可能很复杂且容易出错，因此 Angular 17 在核心框架中引入一种更符合人体工程学的延迟加载组件的方法 @defer ， @defer 不仅仅支持延迟组件，同时也支持延迟加载指令和管道，随着新的 @defer 的引入，我们可以更细颗粒度的控制我们的加载资源，优化应用初始包的体积，提升用户加载的速度。
使用限制
@defer 块中的组件必须是独立组件，非独立组件不支持延迟加载并且会立即加载，及时他被包裹在 @defer 块中
不能在 @defer 块以外引用这个组件，包括使用 @ViewChild 查询这个组件
使用
@defer
@defer 块中的内容最初不会显示，当满足指定的触发器或条件并获取依赖项，块中的内容才会展示，默认情况下，当浏览器状态变为空闲状态（Idle）时，会触发 @defer 加载。
@defer {
}
@defer {
{{name | transterName}}
}
@placeholder
默认情况下， @defer 块在触发之前不会呈现任何内容，我们可以定义 @placeholder 可选的块，声明在触发延迟块之前要显示的内容，当延迟内容加载完成后， @placeholder 块中的内容会销毁，需要注意的是在 @placeholder 块中的内容永远都是立即记载的
@defer {
} @placeholder {
}
@placeholder 块接受一个可选参数 minimum 来指定应显示此占位符的时间，单位支持 s 和 ms。 minimum 是为了防止延迟项加载过快导致内容闪烁。
@defer {
} @placeholder(minimum 500ms) {
}
@loading
@loading 与 @placeholder 一样，也是是一个可选块，允许我们指定加载依赖期间需要展示的内容，与 @placeholder 类似，它也是立即加载的，它可以接收两个参数 after 和 minimum
@defer {
}@loading（(after 100ms; minimum 1s)） {
}
@error
@error 比较好理解，我们可以在 @error 中指定依赖加载失败时候展示的内容，与 @placeholder 和 @loading ， @error 块的内容也是立即加载的，并且也是可选的
@defer {
}@error{
const componentFixture = TestBed.createComponent（ComponentA）;
// Retrieve the list of all defer block fixtures and get the first block.
const deferBlockFixture = componentFixture.getDeferBlocks()[0];
const deferBlockFixture = componentFixture.getDeferBlocks（）[0];
// Render loading state and verify rendered output.
await deferBlockFixture.render(DeferBlockState.Loading);
expect(componentFixture.nativeElement.innerHTML).toContain(‘Loading’);
expect（componentFixture.nativeElement.innerHTML）.toContain（‘加载’）;
// Render final state and verify the output.
await deferBlockFixture.render(DeferBlockState.Completed);
expect(componentFixture.nativeElement.innerHTML).toContain(‘’);
});
插件支持
Prettier
npm i prettier@3.1 --save-dev
QA
支持自定义 Block 吗？
@defer 可以定义自己的 on 的触发器吗？
控制流会支持自动迁移吗？
现有结构指令会废弃吗？
新的控制流会不会影响 ViewChild 查询结果？
新的控制流有更好的性能？
CDK 的虚拟滚动会收到影响吗？
CDK 目前将继续为虚拟滚动和其他用例提供其现有的结构指令。Angular 将研究将 CDK 的一些结构指令转换为内置语法，或者将扩展点添加到现有语法中供 CDK 构建（例如，支持虚拟 for 滚动）
