as 和 let 之间的异步管道区别

Question

举这些例子：

<ng-container *ngIf="vo$ | async; let vo">

和

<ng-container *ngIf="vo$ | async as vo">

它们有相同的目的，将可观察到的最新值获取到变量中vo。

但这两种语法有什么区别吗？

Answer 1

问题可能更多是关于结构指令如何工作而不是异步管道。as和let语法是结构指令使用的 Angular 模板语法的一部分。

与 Angular Template 语法方面没有什么区别。它们是 Angular 模板的有效语法。

然而，它们的强类型化方式有所不同。看一下ng_if.ts来自 Angular 源代码的以下代码

/**
 * @publicApi
 */
export class NgIfContext<T = unknown> {
  public $implicit: T = null!;
  public ngIf: T = null!;
}

结构指令作者可以帮助消费者提供强类型上下文。由于存在as和let，上下文还需要考虑两者

• $implicit允许let类型安全
• ngIf（或指令的选择器）允许as类型安全

进一步解释：$implicit是一个特殊属性，允许 a 的使用者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>