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

编辑:作为附加引用，您可以关注 these commits在 #15025拉取请求以查看他们如何在 NgIf 和 NgForOf 中实现 as 关键字。简而言之:

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

此外，如果您很好奇，可以通过关注 #13297 查看他们如何在 NgIf 中实现 let拉取请求。

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

---

原始答案: 如果您真的不关心 as 语法并且您只需要工作模板变量，这将完成这项工作。

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

适用于从 Angular github 复制和粘贴的 ngIf。参见 StackBlitz演示。