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

Question

举这些例子：

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

和

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

他们的目的是一样的，将observable的最新值放入变量vo。

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

Answer 1

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

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

但是，它们的强类型化方式不同。从Angular source

看下面的ng_if.ts代码

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

结构指令作者可以帮助消费者提供 strongly-typed 上下文。由于有as和let，Context也需要同时考虑

$implicit 允许 let 成为 type-safe
ngIf（或指令的选择器）允许 as 成为 type-safe

进一步解释：$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>

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

Async Pipe difference between as and let

angular

rxjs

observable