前言
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 个点非常强
-
trackByFunction 不需要在 AppComponent 里定义了
-
@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。
-
@defer (on idle)
idle 指的是游览器的 requestIdleCallback 事件
-
@defer (on immediate)
immediate 表示一旦 Angular first render 结束后立马就触发。
-
@defer (on timer(500ms))
timer 就是 setTimeout,可以写 ms (millisecond) 或者 s (second)
-
@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。
-
@defer(on viewport)
viewport 指的是当指定的 element 出现在 viewport 里,它是通过 IntersectionObserver 实现的。
和 on hover 一样,默认的 element 是 @placeholder,我们可以通过传入参数指定 element。
-
@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
文章来源:https://www.toymoban.com/news/detail-838534.html
想查看目录,请移步 Angular 17+ 高级教程 – 目录文章来源地址https://www.toymoban.com/news/detail-838534.html
到了这里,关于Angular 17+ 高级教程 – Component 组件 の Control Flow的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!