Angular 17+ 高级教程 – Component 组件 の Control Flow

 

前言

Control Flow 是 Angular v17 版本后推出的新模板语法，用来取代 NgIf、NgForOf、NgSwitch 这 3 个 Structure Directive。

Structure Directive 的好处是比较灵活，原理简单，但是即便用了微语法，它看上去还是相当繁琐，而且不够优雅。

Conrol Flow 的好处是它的语法够美，缺点是不必 Structure Directive 灵活，开发者无法做任何 customize，只能看 Angular 给什么用什么。

 

参考

Docs – Built-in control flow

Docs – Deferrable Views

 

@if @else if @else

这个是 NgIf 指令的写法

<ng-template #loadingTemplate>
  <p>loading...</p>
</ng-template>

<p *ngIf="person$ | async as person; else loadingTemplate">{{ person.name }}</p>

这个是 Control Flow 的写法

@if(person$ | async; as person) {
  <p>{{ person.name }}</p>
}
@else {
  <p>loading...</p>
}

Control Flow 还支持 @else if，这个是 NgIf 指令不支持的。

@if (value >= 5) {
  <p>greater than or equal to five</p>
}
@else if (value >= 2) {
  <p>greater than or equal to two</p>
}
@else {
  <p>less than two</p>
}

Control Flow @if 的原理

Contorl Flow 不依赖 NgIf 指令，甚至不依赖 ViewContainerRef，它使用的是比较底层的接口，

比如 createAndRenderEmbeddedLView 函数和 addLViewToLContainer 函数。这两个函数的源码我们在 Dynamic Component 文章中研究过，

它们也是 ViewContainerRef 内部使用的。

app.component.js

在 renderView 阶段，@if、@else if、@else 分别会创建三个 ng-template。

在 refreshView 阶段，会执行 ɵɵconditional 函数。第二个参数依据判断条件它会宣传第几个 ng-template。

ɵɵconditional 函数的源码在 control_flow.ts

 

@for @empty

这个是 NgForOf 指令的写法

<ng-template #noDataTemplate>
  <p>no datas</p>
</ng-template>

<ng-container *ngIf="people.length > 0 else noDataTemplate">
  <ng-container *ngFor="let person of people; trackBy: trackByName; let index = index">
    <p>index: {{ index }}</p>
    <p>name : {{ person.name }}</p>
  </ng-container>
</ng-container>

这个是 Control Flow 的写法

@for (person of people; track person.name; let index = $index) {
  <p>index: {{ index }}</p>
  <p>name : {{ person.name }}</p>
} 
@empty {
  <p>no datas</p>
}

有 2 个点非常强

  1. trackByFunction 不需要在 AppComponent 里定义了

  2. @empty 取代了 NgIf 指令

@for 的原理我们就不翻源码了，它和 @if 一样都不依赖 Structure Directive，里面都是调用底层的接口，也因为这样 @for 比 NgForOf 指令速度快很多哦。

 

@switch @case @default

这个是 NgSwitch 指令的写法

<ng-container [ngSwitch]="status">

  <ng-template [ngSwitchCase]="'Completed'">
    <p>complete</p>
  </ng-template>

  <ng-template [ngSwitchCase]="'Pending'">
    <p>pending</p>
  </ng-template>
  
  <ng-template ngSwitchDefault>
    <p>none</p>
  </ng-template>

</ng-container>

这个是 Control Flow 的写法

@switch (status) 
{
  @case ('Completed') {
    <p>complete</p>
  }
  @case ('Pending') {
    <p>pending</p>
  }
  @default {
    <p>none</p>
  }
}

提醒：@switch 和 ngSwtich 指令一样，都没有 fallthrough 的概念，match 到后会自动 break。

 

@defer @placeholder @loading @error

@defer 是 Control Flow 独有的，不存在 Defer 指令。

@defer 的作用是延迟显示一段内容，并且内容里包含的组件/指令/Pipe 还会延迟加载。

@defer (on timer(5s)) {
  <app-say-hi />
  <app-hello-world />
}

上面这段表示 5 秒中后才输出 SayHi 和 HelloWorld 组件。

我们可以这样去理解，@defer 会被 compile 成 ng-template，5 秒钟后会 createEmbeddedView 然后 insert。

此外 compile 时它还会找出涉及的组件，改成使用 import('/path/component.ts') 的方式动态加载，这样可以减少 first load 的 bundle size。

app.component.js

@loading，@placeholder，@error

@defer (on timer(2s)) {
  <app-say-hi />
  <app-hello-world />
}
@placeholder {
  <p>blank...</p>
}
@loading {
  <p>loading...</p>
}
@error {
  <p>something wrong</p>
}

@defer 的显示流程是这样：

一开始先显示 @placeholder 的内容，等 on timer 触发后，显示 @loading 内容，这时会去 lazyload -> createEmbededView -> insert，最终显示 @defer 内容。

如果 lazyload 的过程失败，那就显示 @error 内容。

minimum 和 after options

有时候 lazyload 或许会太快，loading 一闪而过体验不好，这时可以设置 after 和 minimum。

@loading(after 100ms; minimum 1s) {
  <p>loading...</p>
}

当开始 lazyload 后，Angular 会开始计时，超过 100ms 后，如果 lazyload 还没有结束，那就会显示 @loading 内容，

如果 lazyload 在 1 秒钟内完成，它不会马上输出 @defer 内容，而是会等到 minimum 1s 后才输出。

注：after 和 minimum 是同时开始计时的。

@placeholder 也支持 minimum options，不过不支持 after 哦。

Trigger

除了 on timer 以外，还有另外 5 个 Triggers。

  1. @defer (on idle)

    idle 指的是游览器的 requestIdleCallback 事件

  2. @defer (on immediate)

    immediate 表示一旦 Angular first render 结束后立马就触发。

  3. @defer (on timer(500ms))

    timer 就是 setTimeout，可以写 ms (millisecond) 或者 s (second)

  4. @defer (on hover)

    <div #hoverArea>hover area</div>
@defer (on hover(hoverArea)) {
  <app-say-hi />
  <app-hello-world />
}

@defer(on hover) {
  <app-say-hi />
  <app-hello-world />
}
@placeholder {
  <div>hover area</div>
}

    hover element 默认是 @placeholder 内容，我们可以传入 element 作为指定的 hover area。

  5. @defer(on viewport)

    viewport 指的是当指定的 element 出现在 viewport 里，它是通过 IntersectionObserver 实现的。

    和 on hover 一样，默认的 element 是 @placeholder，我们可以通过传入参数指定 element。

  6. @defer (on interaction)

    interaction 指的是 click 和 keydown 事件，和 on hover / on viewport 一样可以指定 element。

我们可以写 multiple trigger，它的关系是 "or"，也就是说只要其中一个 trigger 触发就执行。

@defer (on viewport; on timer(5s)) {
  <app-say-hi />
  <app-hello-world />
}

当 on viewport 或者超过 5 秒后显示。

Prefetching

prefetching 的作用是多一个 trigger 用于是否提早 lazyload。

@defer (on viewport; prefetch on timer(5s)) {
  <app-say-hi />
  <app-hello-world />
}
@placeholder {
  <p>placeholder</p>
}

5 秒后，虽然 element 没有 on viewport 但会先去加载，只加载不显示，一直到 element on viewport 才显示。

prefetch 也可以写 multiple trigger，只要其中一个触发就执行

@defer (on viewport; on timer(5s); prefetch on timer(3s); prefetch on hover) {
  <app-say-hi />
  <app-hello-world />
}
@placeholder {
  <p>placeholder</p>
}

 

总结

Control Flow 代码比起 Structure Directive + 微语法整齐很多，代价是无法扩展。

NgIf、NgForOf、NgSwtich 指令相信在不久的将来会被淘汰，但是 ng-template、Structure Directive 和微语法是不会被淘汰的，

而要掌握好 Structure Directive 和微语法，我个人觉得 NgIf、NgForOf、NgSwtich 指令是非常值得参考的。

 

目录

上一篇 Angular 17+ 高级教程 – Component 组件 の Structural Directive (结构型指令) & Syntax Reference (微语法)

下一篇 Angular 17+ 高级教程 – NgModule

想查看目录，请移步 Angular 17+ 高级教程 – 目录

 

posted @ 2024-01-14 18:30  兴杰  阅读(150)  评论(0)  编辑  收藏  举报