以这些例子为例:
<ng-container *ngIf="vo$ | async; let vo">
和
<ng-container *ngIf="vo$ | async as vo">
它们有着相同的目的,将可观测数据的最新值输入变量vo
.
但是这两种语法之间有什么区别吗?
以这些例子为例:
<ng-container *ngIf="vo$ | async; let vo">
和
<ng-container *ngIf="vo$ | async as vo">
它们有着相同的目的,将可观测数据的最新值输入变量vo
.
但是这两种语法之间有什么区别吗?
问题可能更多的是 struct 化指令如何工作,而不是异步管道.as
和let
语法是Structural Directive使用的Angular 模板语法的一部分.
与Angular 模板语法方面没有区别.它们是Angular 模板的有效语法.
然而,它们在强类型方面是不同的.看一看下面的ng_if.ts
代码,来自Angular source
/**
* @publicApi
*/
export class NgIfContext<T = unknown> {
public $implicit: T = null!;
public ngIf: T = null!;
}
struct 化指令作者可以帮助消费者提供强类型上下文.因为有as
和let
,所以上下文也需要考虑这两种情况
$implicit
允许let
是类型安全的ngIf
(或指令的 Select 器)允许as
是类型安全的进一步解释:$implicit
是一个特殊属性,它允许ng-template
的使用者通过let someVar
获取上下文的隐式数据
<ng-template let-implicit let-someNamedVar="someNamedVar"></ng-template>
在*ngIf
的例子中,我们可以重写<ng-container *ngIf
的长形式,这样我们就可以看到NgIfContext
的意义
<!-- <ng-container *ngIf="vo$ | async as vo"></ng-container> -->
<ng-template [ngIf]="vo$ | async" let-vo="ngIf">
<ng-container></ng-container>
</ng-template>
<!-- <ng-container *ngIf="vo$ | async;let vo"></ng-container> -->
<ng-template [ngIf]="vo$ | async" let-vo>
<ng-container></ng-container>
</ng-template>