*ngTemplateOutlet与[ngTemplateOutlet]是否等价？底层差异解析

这并非重复提问——既不是探讨两者差异的内容，也不是解释星号运算符作用的帖子，但本文的讨论基于这些内容展开。

通常，*ngBeep这类带星号的写法是[ngBeep]的语法糖，是更简洁的表达方式。不过在我的代码里，下面两种写法表现完全一致，符合预期：

<div *ngFor="let item of [1,2,3]">
  #{{item}}
  <ng-container *ngTemplateOutlet="content"></ng-container>
  <ng-container [ngTemplateOutlet]="content"></ng-container>
</div>

严格来讲，前者比后者少一个字符，但为了省一个字符引入新运算符似乎有点多余。当然，对其他指令来说，这种写法能节省更多字符甚至代码行数。

想请教在这个场景下，这两行<ng-container>代码是否完全等价？如果不等价，二者底层有什么差异？

在这个场景下，这两行代码完全等价，底层没有任何差异。

Angular的星号语法糖核心逻辑就是将结构型指令的简化写法，转换为标准的属性绑定（或结合<ng-template>的形式）。对于*ngTemplateOutlet="content"这种简单用法，Angular会直接将其转换为<ng-container [ngTemplateOutlet]="content"></ng-container>——两者指向的是同一个指令实例，执行的是完全相同的渲染逻辑。

星号语法糖的价值在复杂场景才会凸显：比如需要传递上下文时，*ngTemplateOutlet="content; context: { $implicit: item }"就比<ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>简洁不少，能减少冗余代码。而你当前的场景只是最基础的用法，所以看起来只是少了个字符而已。

内容的提问来源于stack exchange，提问作者Konrad Viltersten