Angular 2 快速入门：模板

Angular 2 中的模板与 Angular 1 中的模板非常类似，但是还是有了很多的小改进。

简单示例

下面这个示例展示了一个 Angular 2 模板，它展示出我的姓名以及我喜欢的事物。

<div>
  您好，我叫 {{ name }} ，我喜欢 {{ thing }}。
</div>

{{}} ：渲染

要渲染出某一个变量的值 ，我们可以使用双大括号 {{}}：

我的名字叫 {{ name }}

在渲染声明中，我们还像 Angular 1 一样可以使用管道工具（Pipes`），比如过滤器，他们可以转换一个值为另一个值，或者将一段字符串本地话，或者可以将一个数字按照本地的货币数值格式化。

[] ：绑定属性

要为一个组件绑定一个属性，可以使用 [] 声明，如果你在组件中有一个 this.currentVolume 声明，那么我们将可以将该值单向同步至组件，以帮助组件可以实时具有该属性的值：

<video-control [volume]="currentVolume"></video-control>

() ：事件监听

要在一个组件上监听一个事件，可以使用 () 声明：

<my-component (click)="onClick($event)"></my-component>

[()] ：数据双向绑定

要实现数据的双向绑定，我们可以使用 [()] 声明：

<input [(ngModel)]="myName" />

此时，this.myName 的值将与 input 的值双向同步。

* : 星号

* 声明表示该指令把当前组件作为一个模板，而且不会直接将其按愿你渲染，比如 ngFor 指令遍历出 items 中的每一个 item， <my-component> 每一个 item 会创建一个组件的实例，但是组件本身的声明并不会被渲染出来。

<my-component *ngFor="#item fo items">
</my-component>

其它类似的指令还有 *ngIf、*ngSwitch 等。