AngularJS2 模板文法

標籤：border   can   通訊   轉化   normal   dom   傳遞   樣式   ext   

1. HTML
HTML 是 Angular 模板的"語言"，除了 <script> 元素是被禁用的外 ，其他 HTML 元素都是支援的。
2. 插值運算式
插值運算式的文法格式為：{{ ... }}
插值運算式可以把計算的字串插入HTML中，也可以作為屬性值來使用。

<h3>  {{title}}  <img src="{{imageUrl}}" style="height:30px"></h3>

3. 模板運算式
{{ ... }} 裡頭其實就是一個模板運算式，Angular 會對其進行求值並轉化為字串輸出。
模板運算式類似 JavaScript 的語言，很多 JavaScript 運算式也是合法的模板運算式，但不是全部。
以下 JavaScript 運算式是禁止的：

• 賦值運算式（=，+=，-=...）
• new操作符
• 帶有;或者‘的串連運算式
• 自增和自減操作（++和--） 

其他與Javascript文法不同的值得注意的包括：

• 不支援位元運算符（|和&）
• 模板運算式的操作符，如|和?.等，被賦予了新的含義

4. 屬性綁定
模板的屬性綁定可以把視圖元素的屬性設定為模板運算式。
設定元素的屬性：<img [src]="imageUrl">
設定指令的屬性：<div [ngClass]="classes">[ngClass]綁定到classes 屬性</div>
設定一個自訂群組件的屬性（這是父子組件間通訊的重要途徑）：
<user-detail [user]="currentUser"></user-detail>
5. HTML 屬性(Attribute)、 class 和 style 綁定
（1）屬性綁定
當元素沒有屬性可綁的時候，使用HTML標籤屬性(Attribute)綁定。

<table border=1>  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>  <tr><td>Five</td><td>Six</td></tr></table>

（2）CSS類綁定
CSS 類綁定在文法上類似於屬性綁定。但方括弧中的部分不是一個元素的屬性名稱，而是包括一個 class 首碼，緊跟著一個點 (.) ，再跟著 CSS 類的名字組成。 其中後兩部分是可選的。例如： [class.class-name]

<!-- 標準HTML樣式類設定 --><div class="bad curly special">Bad curly special</div><!-- 通過綁定重設或覆蓋樣式類  --><div class="bad curly special" [class]="badCurly">Bad curly</div><!-- 通過一個屬性值來添加或移除special樣式類 --><div [class.special]="isSpecial">這個樣式比較特殊</div>

（3）style樣式綁定
通過樣式綁定，可以設定內聯樣式。文法：[style.style-property]

<button [style.color] = "isSpecial ? ‘red‘: ‘green‘">紅色</button><button [style.background-color]="canSave ? ‘cyan‘: ‘grey‘" >儲存</button> <!-- 帶有單位的樣式綁定 --><button [style.font-size.em]="isSpecial ? 3 : 1" >大</button><button [style.font-size.%]="!isSpecial ? 150 : 50" >小</button>

6. 事件綁定
事件綁定的文法是由等號左側小括弧內的 目標事件 和右側引號中的模板聲明 組成。
注意：左側圓括弧也可以使用on- 首碼的形式。
7. 使用 NgModel 進行雙向資料繫結
通過 [(NgModel)]來實現雙向繫結樣本：
<input [(ngModel)]="currentUser.firstName">
[]實現了資料流從組件到模板，()實現了資料流從模板到組件，兩者一結合[()]就實現了雙向繫結。
使用首碼形式的文法：<input bindon-ngModel="currentUser.firstName">
8. 內建指令
Angular 的內建指令有 NgClass、NgStyle、NgIf、NgFor、NgSwitch等。
（1）NgClass
通過綁定到 NgClass 動態添加或刪除 CSS 類。
（2）NgStyle
NgStyle 通過把它綁定到一個key:value控制對象的形式，可以讓我們同時設定很多內聯樣式。

setStyles() {  let styles = {    // CSS屬性名稱    ‘font-style‘:  this.canSave      ? ‘italic‘ : ‘normal‘,  // italic    ‘font-weight‘: !this.isUnchanged ? ‘bold‘   : ‘normal‘,  // normal    ‘font-size‘:   this.isSpecial    ? ‘24px‘   : ‘8px‘,     // 24px  };  return styles;}

通過添加一個NgStyle屬性綁定，讓它調用setStyles，並據此來設定元素的樣式：

<div [ngStyle]="setStyles()">    這個div的樣式是italic, normal weight, 和extra large (24px)。</div>

（3）NgIf
通過把NgIf指令綁定到一個真值運算式，可以把一個元素及其子項目添加到DOM樹上。
<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>
（4）NgSwitch
當需要從一組可能的元素樹中根據條件顯示其中一個時，就需要NgSwitch了。Angular將只把選中的元素添加進DOM中。如：

<span [ngSwitch]="userName">  <span *ngSwitchCase="‘張三‘">張三</span>  <span *ngSwitchCase="‘李四‘">李四</span>  <span *ngSwitchCase="‘王五‘">王五</span>  <span *ngSwitchCase="‘趙六‘">趙六</span>  <span *ngSwitchDefault>龍大</span></span>

（5）NgFor
當需要展示一個由多個條目組成的列表時就需要NgFor指令了。
<div *ngFor="let user of users">{{user.fullName}}</div>
ngFor指令支援一個可選的index索引，在迭代過程中會從0增長到數組中的長度。
<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>
（6）NgForTrackBy
ngFor 指令有時候會效能較差，特別是在大型列表中。如對一個條目的一點小更改、移除或添加，都會導致級聯的 DOM 操作。
通過追蹤函數解決這個問題：
trackByUsers(index: number, user: User){return user.id}
然後把NgForTrackBy指令設定為那個追蹤函數：
<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>
追蹤函數不會排除所有DOM更改。如果用來判斷是否為同一個連絡人的屬性變化了，就會更新DOM元素，反之就會留下這個DOM元素。列表介面就會變得比較更加平滑，具有更好的響應效果。
9. 模板引用變數
模板引用變數是模板中對 DOM 元素或指令的引用。

<!-- phone 引用了 input 元素，並將 `value` 傳遞給事件控制代碼 --><input #phone placeholder="phone number"><button (click)="callPhone(phone.value)">Call</button> <!-- fax 引用了 input 元素，並將  `value` 傳遞給事件控制代碼  --><input ref-fax placeholder="fax number"><button (click)="callFax(fax.value)">Fax</button>

AngularJS2 模板文法