Angular 双向绑定&星号（*）前缀

双向绑定 [(…)]

双向绑定为你的应用程序提供了一种在组件类及其模板之间共享数据的方式。
双向绑定语法实际上是属性绑定和事件绑定的语法糖。

双向绑定会做两件事：

• 设置特定的元素属性。
• 监听元素的变更事件。

Angular 为此提供了一种特殊的双向数据绑定语法 [()]。

[()] 语法将属性绑定的括号 [] 与事件绑定的括号 () 组合在一起。
[()] 语法：该元素具有名为 x 的可设置属性和名为 xChange 的相应事件。

星号是一个用来简化更复杂语法的“语法糖”

这里的 *ngIf 会在 hero 存在时显示英雄的名字。

<div *ngIf="hero" class="name">{{hero.name}}</div>

你可能注意到了指令名的星号（*）前缀，并且困惑于为什么需要它以及它是做什么的。
从内部实现来说，Angular 把 *ngIf 属性 翻译成一个 元素 并用它来包裹宿主元素，代码如下：

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

*ngIf 指令被移到了 ng-template 元素上。在那里它变成了一个属性绑定 [ngIf]。div标签 上的其余部分，包括它的 class 属性在内，移到了内部的 ng-template 元素上。

第一种形态永远不会真的渲染出来。 只有最终产出的结果才会出现在 DOM 中。

Angular 会在真正渲染的时候填充 < ng-template> 的内容，并且把 < ng-template> 替换为一个供诊断用的注释。
NgFor和NgSwitch…指令也都遵循同样的模式。