ANGULAR2 摘要（一）

 

 

• 綁定語法：

1. 咱們要重點突出下綁定目標和綁定源的區別。
2. 綁定的目標是在=左側的部分， 源則是在=右側的部分。
3. 綁定的目標是綁定符：[]、()或[()]中的屬性或事件名， 源則是引號 (" ") 中的部分或插值符號 ({{}}) 中的部分。
4. 源指令中的每一個成員都會自動在綁定中可用。 不須要特別作什麼，就能在模板表達式或語句中訪問指令的成員。
5. 訪問目標指令中的成員則受到限制。 只能綁定到那些顯式標記爲輸入或輸出的屬性。

 

 

數據方向	語法	綁定類型
單向 從數據源 到視圖目標	COPY CODE {{expression}} [target] = "expression" bind-target = "expression"	插值表達式 Property Attribute 類 樣式
單向 從視圖目標 到數據源	COPY CODE (target) = "statement" on-target = "statement"	事件
雙向	COPY CODE [(target)] = "expression" bindon-target = "expression"	雙向

 

• 綁定目標

數據綁定的目標是 DOM 中的某些東西。 這個目標多是（元素 | 組件 | 指令的）property、（元素 | 組件 | 指令的）事件，或(極少數狀況下) attribute 名。 下面是的彙總表：

綁定類型	目標	範例
Property Property	元素的 property 組件的 property 指令的 property	<img [src] = "heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass] = "{selected: isSelected}"></div>
事件	元素的事件 組件的事件 指令的事件	<button (click) = "onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event">click me</div>
雙向	事件與 property	<input [(ngModel)]="heroName">
Attribute	attribute（例外狀況）	<button [attr.aria-label]="help">help</button>
CSS 類	class property	<div [class.special]="isSpecial">Special</div>
樣式	style property	<button [style.color] = "isSpecial ? 'red' : 'green'">

 

總結： DOM元素的property 用[ ]來綁定等號右邊的表達式（表達式對應組件的一個屬性或方法）。 

           事件通常用（）來綁定

 

 

• 變量#

能夠在同一元素、兄弟元素或任何子元素中引用模板引用變量。

<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

#phone 變量就是input標籤，在button中綁定click事件，將input的value當作參數傳給callPhone事件方法。 

 

 

• 聲明輸入和輸出屬性

目標屬性必須被顯式的標記爲輸入或輸出。

當咱們深刻HeroDetailComponent內部時，就會看到這些屬性被裝飾器標記成了輸入和輸出屬性。

COPY CODE

@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

另外，還能夠在指令元數據的inputs或outputs數組中標記出這些成員。好比這個例子：

COPY CODE

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

 

既能夠經過裝飾器，也能夠經過元數據數組來指定輸入/輸出屬性。但別同時用！

輸入仍是輸出？

Input or output?

輸入屬性一般接收數據值。 輸出屬性暴露事件生產者，如EventEmitter對象。

輸入和輸出這兩個詞是從目標指令的角度來講的。

從HeroDetailComponent角度來看，HeroDetailComponent.hero是個輸入屬性， 由於數據流從模板綁定表達式流入那個屬性。

從HeroDetailComponent角度來看，HeroDetailComponent.deleteRequest是個輸出屬性， 由於事件從那個屬性流出，流向模板綁定語句中的處理器。

 

• 管道操做符 ( | )

在綁定以前，表達式的結果可能須要一些轉換。例如，可能但願把數字顯示成金額、強制文本變成大寫，或者過濾列表以及進行排序。

Angular 管道對像這樣的小型轉換來講是個明智的選擇。 管道是一個簡單的函數，它接受一個輸入值，並返回轉換結果。 它們很容易用於模板表達式中，只要使用管道操做符 (|) 就好了。

<div>Title through uppercase pipe: {{title | uppercase}}</div>

管道操做符會把它左側的表達式結果傳給它右側的管道函數。

 

• 安全導航操做符 ( ?. ) 和空屬性路徑

Angular 的安全導航操做符 (?.) 是一種流暢而便利的方式，用來保護出如今屬性路徑中 null 和 undefined 值。 下例中，當currentHero爲空時，保護視圖渲染器，讓它免於失敗。

 

The current hero's name is {{currentHero?.firstName}}

Angular 安全導航操做符 (?.) 是在屬性路徑中保護空值的更加流暢、便利的方式。 表達式會在它遇到第一個空值的時候跳出。 顯示是空的，但應用正常工做，而沒有發生錯誤。