Angular 自定义 ngIf 指令 'as' 语法

Question

我正在创建自定义 *ngIf 指令以在加载时用占位符替换内容。我让一切都按我想要的方式工作，并在 *ngIf 指令 (https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts) 之后对其进行建模唯一不起作用的是 'as' 语法，我没有看到任何对它的引用或从哪里开始。

*myCustomDirective="loading$ | async as result"

上面的方法不起作用，当 loading$ observable 发出数据时，结果是未定义的。但是，占位符会按预期显示并替换为内容。（由于未定义的结果，内容出现错误）

Answer 1

更新答案：您可以从 Angular github 复制并粘贴 NgIf 指令，您唯一要做的就是更改 NgIfContext#ngIf 的名称以匹配您的自定义 if 指令名称，例如:

export class NgIfContext {
  public $implicit: any = null;
  public appCustomIf: any = null;
}

然后分别更改所有 Input() 的名称以匹配您的指令名称。有了这个，as 关键字将起作用。请参阅 StackBlitz 演示。

EDIT：作为附加参考，您可以按照 these commits in #15025 拉取请求查看他们如何在 NgIf 和 NgForOf。简而言之：

在 a63d57f 中，他们向解析器添加了 as 关键字。
在 203ee65 and ef93998 中，他们分别将 NgIf 和 NgForOf 转换为使用 as 语法。
最终在 71d43db 他们公开了 NgForOfContext,NgIfContext 并让 NgForOf 使用 NgForOfContext.

此外，如果您很好奇，可以通过遵循 #13297 拉取请求，了解他们如何在 NgIf 中实现 let。

可以帮助您了解底层发生的事情。

原回答： 如果你真的不关心 as 语法，你只需要工作模板变量，这将完成工作。

*appCustomIf="test$ | async; let result"

适用于从 Angular github 复制并粘贴的 ngIf。请参阅 StackBlitz 演示。

Answer 2

这是关于 Angular 结构指令 (https://angular.io/guide/structural-directives#microsyntax)

的微语法

如果您希望通过 as 语法导出上下文，您应该使用 与指令在导出时 完全相同的名称，即

this.viewContainerRef.createEmbeddedView(this.templateRef, {myCustomDirective: this.context})

您还可以使用 $implicit 语法 - 这将允许您通过 let 变量导出上下文而无需命名（默认导出）。

有关详细信息，请参阅此 example。

Angular 自定义 ngIf 指令 'as' 语法

Angular custom ngIf directive 'as' syntax

angular

angular2-directives

angular-directive