Angular 自定义 ngIf 指令“as”语法答案

【问题标题】：Angular custom ngIf directive 'as' syntaxAngular 自定义 ngIf 指令“as”语法
【发布时间】：2019-07-23 17:32:51
【问题描述】：

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

*myCustomDirective="loading$ | async as result"

上述方法不起作用，当 loading$ observable 发出数据时结果未定义。然而，占位符显示并替换为预期的内容。（由于未定义的结果，内容给出了错误）

【问题讨论】：

试试"(loading$ | async) as result"。
还是不行。

标签： angular angular2-directives angular-directive

【解决方案1】：

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

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

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

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

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

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

This 可以帮助你了解底层发生了什么。

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

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

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

【讨论】：

我可以知道我应该改进什么，因为有人否决了我的答案吗？（意思是没用）

【解决方案2】：

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

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

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

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

详情请见example。

【讨论】：

经过更多测试后发现我必须像接受的答案一样制作自定义 NgIfContext 类，否则如果订阅了 observable，组件不会更新。
这很奇怪，因为我已经测试了这两种变体 - 使用和不使用异步管道 - 你可以检查一下，我已经更新了我的 stackblitz example。你能告诉我一些实际上没有用的细节吗？
这是一个带有 *ngIf 的示例，您的解决方案和接受的答案解决方案。您可以看到您的解决方案存在一些问题。 stackblitz.com/edit/angular-gjqg1p
不是因为NgIfContext。我只是在重新渲染之前没有清除容器。见update example
我的错，是的。查看我的更改集，我所做的只是将 {myCustomDirective: this.context} 替换为 NgIfContext。以前，当 observable 发出一个新值并且内容被正确更新后，内容没有得到更新。不幸的是，我没有时间尝试重现所有内容，但一些极端情况导致它无法正常工作。