angular4筆記系列之模板與數據綁定

模板與數據綁定

綁定語法

單向

從數據源到視圖目標:

{{expression}}
[target]="expression"
bind-target="expression"

從視圖目標到數據源:

(target)="statement"
on-target="statement"

雙向

[(target)]="expression"
bindon-target="expression"

插值表達式 ({{...}})

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

通常來講，括號間的素材是一個模板表達式，Angular 先對它求值，再把它轉換成字符串。
嚴格來說，插值表達式是一個特殊的語法，Angular 把它轉換成了屬性綁定，後面將會解釋這一點。

模板表達式

編寫模板表達式所用的語言看起來很像 JavaScript。
JavaScript 中那些具備或可能引起反作用的表達式是被禁止的，包括：

• 賦值 (=, +=, -=, ...)
• new運算符
• 使用;或,的鏈式表達式
• 自增或自減操做符 (++和--)

和 JavaScript語 法的其它顯著不一樣包括：

• 不支持位運算|和&
• 具備新的模板表達式運算符，好比|、?.和!

屬性綁定 ( [屬性名] )

<button [disabled]="isUnchanged">Save</button>

再學習屬性綁定以前，先來弄懂兩個概念attribute與property：

• property是DOM中的屬性，是JavaScript裏的對象；property 的值能夠改變
• attribute是HTML標籤上的特性，它的值只可以是字符串，它初始化DOM property，而後它們的任務就完成了；attribute 的值不能改變

屬性綁定是經過 property 來工做的，而不是 attribute

attribute、class 和 style 綁定

模板語法爲那些不太適合使用屬性綁定的場景提供了專門的單向數據綁定形式。

1. attribute

形式：[attr. attribute]="statement"

<button [attr.aria-label]="help">help</button>

2.class
形式：[class]="statement" / [class.className]="statement"

<div class="bad curly special"
     [class]="badCurly">Bad curly</div>      //綁定到特定的類名
     
<div class="special"
     [class.special]="isSpecial">This one is not so special</div>     //判斷表達式的值是否爲真，來添加類名

3.style
經過樣式綁定，能夠設置內聯樣式。
形式：[style.style-property]="statement"
有些樣式綁定中的樣式帶有單位，在這裏，以根據條件來設置字體大小的單位

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

CSS 類綁定 是添加或刪除單個類的最佳途徑
樣式綁定是設置單同樣式值的簡單方式

事件綁定 ( (event) )

形式：(event)="statement"

<div (myClick)="clickMessage=$event">click</div>      //綁定會經過名叫$event的事件對象傳遞關於此事件的信息（包括數據值）,$event就是 DOM事件對象，它有像target和target.value這樣的屬性。

使用 EventEmitter 實現自定義事件

• 指令建立一個EventEmitter實例，而且把它做爲屬性暴露出來
• 指令調用EventEmitter.emit(payload)來觸發事件，能夠傳入任何東西做爲消息載荷

deleteRequest = new EventEmitter<Hero>();

delete() {
  this.deleteRequest.emit(this.hero);
}

雙向數據綁定 ( [(...)] )

形式：[(...)]="statement"
雙向綁定語法其實是屬性綁定和事件綁定的語法糖，比起單獨綁定屬性和事件，雙向數據綁定語法顯得很是方便。

輸入輸出屬性 ( @Input 和 @Output )

聲明輸入和輸出屬性

//第一種方式
@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

//第二種方式
@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

給輸入/輸出屬性起別名

//第一種方式
@Output('myClick') clicks = new EventEmitter<string>(); 

//第二種方式
@Directive({
  outputs: ['clicks:myClick']  
})

輸入屬性

輸入屬性一般接收數據值。

輸出屬性

輸出屬性暴露事件生產者，如EventEmitter對象。

模板表達式操做符

管道操做符 ( | )

安全導航操做符 ( ?. )

Angular 的安全導航操做符 (?.) 是一種流暢而便利的方式，用來保護出如今屬性路徑中 null 和 undefined 值。

The null hero's name is {{nullHero?.name}}

非空斷言操做符（!）

<!--No hero, no text -->
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

與安全導航操做符不一樣的是，非空斷言操做符不會防止出現null或undefined。 它只是告訴 TypeScript 的類型檢查器對特定的屬性表達式，不作 "嚴格空值檢測"。