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" 

上面的方法不起作用，当加载$ 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关键字。简而言之：

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

此外，如果你很好奇，你可以看看他们如何通过遵循let拉请求在NgIf实施#13297。

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。