以这些例子为例:

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

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

它们有着相同的目的,将可观测数据的最新值输入变量vo.

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

推荐答案

问题可能更多的是 struct 化指令如何工作,而不是异步管道.aslet语法是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 化指令作者可以帮助消费者提供强类型上下文.因为有aslet,所以上下文也需要考虑这两种情况

  • $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>

Angular相关问答推荐

如何在构造函数中测试MatDialog.Open

Angular 类型的表单不能分配给分部类型

声明Angular material 中按钮的自定义 colored颜色

属性';apiUrl';在我的Angular 应用程序上不存在类型';{}';错误

Angular 16-错误NG8002:无法绑定到NGModel,因为它不是输入的已知属性

由于ngcc操作失败,Angular扩展可能无法正常工作

RxJS如何按顺序进行POST请求,只有在前一个完成后才会触发新的请求?

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

Aws 代码部署在 BeforeBlockTraffic 步骤失败,即使在更新策略后也会超时

Angular 从 13.3.8 恢复到 13.3.7

带有嵌套表单数组的 Angular react式表单

错误:您要查找的资源已被删除、名称已更改或暂时不可用

如何在 Angular4 中访问组件的 nativeElement?

如何添加/设置环境 Angular 6 angular.json 文件

Angular 2中基于Condition条件的点击事件

使用 Angular 2 新路由更改页面标题

NG 测试中的调试测试

在 Angular 2 中对 observable 进行单元测试

路由 getCurrentNavigation 始终返回 null

如何在 Angular 8 应用程序中支持 Internet Explorer?