Angular 2 模板

一个简单的模板

让我们从一个非常简单的模板开始，该模板显示我们的名字和我们最喜欢的东西：

<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>

{}: RENDERING

要呈现值，我们可以使用标准的双卷曲语法：

My name is {{name}}

管道（以前称为过滤器）将值转换为新值，例如本地化字符串或将浮点值转换为货币表示形式：

[]: BINDING PROPERTIES

要解析变量并将其绑定到组件，请使用[]语法。如果我们在组件中有 this.currentVolume，我们将把它传递给我们的组件，值将保持同步：

<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS

():处理事件要监听组件上的事件，我们使用（）语法

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

[()]:双向数据绑定

要在给定用户输入和其他事件的情况下使绑定保持最新，请使用[（）]语法。将其视为处理事件和绑定属性的组合：

<input [（ngModel）] =myName>组件的 this.myName 值将与输入值保持同步。

*：ASTERISK

表示此指令将此组件视为模板，并且不会按原样绘制它。例如，ngFor 接受我们并为项目中的每个项目标记它，但它永远不会呈现我们的首字母，因为它是一个模板：

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

对模板而不是渲染组件起作用的其他类似指令是* ngIf 和* ngSwitch。