角度自定义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

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

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

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

编辑：作为其他参考，您可以在＃15025 pull request中遵循这些提交，以查看它们如何在和中实现关键字。简而言之：asNgIfNgForOf

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

此外，如果你很好奇，你可以看到他们是如何实现let在NgIf按照＃13297拉请求。

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

原始答案： 如果您不太在意as语法，而只需要工作模板变量，则可以完成此工作。

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

可ngIf从Angular github 复制和粘贴。请参阅StackBlitz演示。