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演示。

编辑：作为其他参考，您可以遵循these commits提取请求中的#15025，以了解它们如何在as中实现NgIf关键字，以及NgForOf。简而言之：

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

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

This可以帮助您了解下面的情况。

原始答案： 如果您不太在意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。

角度自定义ngIf指令“ as”语法

2 个答案: