Angular2 模板語法
##插值表達式
{{...}}
<p>My name is {{user.name}}</p>
<h3>
{{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
模板表達式
模板表達式產生一個值
Angular 執行這個表達式，並把它賦值給綁定目標的屬性，這個綁定目標可能是 HTML 元素、組件或指令。
編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaScript 表達式也是合法的模板表達式，但不是全部JavaScript 中那些具有或可能引發副作用的表達式是被禁止的，包括：
-
new`運算符
-
使用
;或,的鏈式表達式 -
自增或自減操作符 (
++和--) -
賦值 (
=,+=,-=, …)和 JavaScript語法的其它顯著不同地方：
-
不支持位運算
|和& -
具有新的模板表達式運算符，比如
|和?.表達式上下文
典型的表達式上下文就是這個組件實例
<!--title和引號中的isUnchanged所引用的都是Component中的屬性。--> {{title}} <span [hidden]="isUnchanged">changed</span>表達式的上下文可以包括組件之外的對象
<!--模板輸入變量 (let hero)和模板引用變量(#heroInput)就是備選的上下文對象之一。--> <div *ngFor="let hero of heroes">{{hero.name}}</div> <input #heroInput> {{heroInput.value}}-
Expression guidelines(表達式指南)
-
No visible side effects
-
Quick execution
-
Simplicity
-
Idempotence
-
綁定語法
綁定類型
綁定的類型可以根據數據流的方向分成三類： 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。
| 語法 | 數據方向 | 綁定類型 |
|---|---|---|
| {{expression}} [target]=“expression” bind-target=“expression” | 從數據源到視圖目標（單向） | 插值表達式、Property Attribute類 、樣式 |
| (target)=“statement” on-target=“statement” | 從視圖目標到數據源（單向） | 事件 |
| [(target)]=“expression” bind-targe=“expression” | 雙向 | 雙向 |
綁定目標
屬性綁定
<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
設置自定義組件的模型屬性（這是父子組件之間通訊的重要途徑）：
<hero-detail [hero]="currentHero"></hero-detail>
屬性綁定與插值綁定都可以選擇，沒有技術上的理由證明哪種形式更好
在渲染視圖之前，Angular 把這些插值表達式翻譯成相應的屬性綁定
<!--做的事情完全相同-->
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
數據類型不是字符串時，就必須使用屬性綁定了
attribute、class和style綁定
attribute
**因爲當元素沒有屬性可綁的時候，就必須使用 attribute 綁定**css
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
css
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly
</div>
```
```html
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[class.special]="!isSpecial">This one is not so special
</div>
style
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
> 注意，*樣式屬性*命名方法可以用[中線命名法](https://angular.cn/docs/ts/latest/guide/glossary.html#dash-case)，像上面的一樣 也可以用[駝峯式命名法](https://angular.cn/docs/ts/latest/guide/glossary.html#camelcase)，如`fontSize`
> 我們通常更喜歡使用 [NgStyle指令](https://angular.cn/docs/ts/latest/guide/template-syntax.html#ngStyle)來同時設置多個內聯樣式
事件綁定
目標事件
<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>
<!-- `myClick` is an event on the custom `ClickDirective` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
$event* 和事件處理語句
在事件綁定中，Angular 會爲目標事件設置事件處理器。
當事件發生時，這個處理器會執行模板語句。
典型的模板語句通常涉及到響應事件執行動作的接收器，例如從 HTML 控件中取得值，並存入模型。
綁定會通過名叫$event的事件對象傳遞關於此事件的信息（包括數據值）。
事件對象的形態取決於目標事件。如果目標事件是原生 DOM 元素事件， $event就是 DOM事件對象，它有像target和target.value這樣的屬性。
<input [value]="currentHero.name"
(input)="currentHero.name=$event.target.value" >
使用 EventEmitter 實現自定義事件
template: `
<div>
<img src="{{heroImageUrl}}">
<span [style.text-decoration]="lineThrough">
{{prefix}} {{hero?.name}}
</span>
<button (click)="delete()">Delete</button>
</div>`
...
// This component make a request but it can't actually delete a hero.
deleteRequest = new EventEmitter<Hero>();
delete() {
this.deleteRequest.emit(this.hero);
}
<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>