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。