Angular4 開發(fā)實戰(zhàn)：(4) 屬性和事件綁定

屬性和事件也是我們開發(fā)中經(jīng)常使用的，而Angular給我們提供了很豐富的屬性和事件綁定，這一章我們就來講解一下屬性和事件綁定。

屬性綁定有多種方式： (1) 簡單屬性(property)

<button [disabled]="isChanged">按鈕</button>   

<button [disabled]="!isChanged">按鈕</button>

當isChanged為true時，按鈕將會顯示成禁用狀態(tài)。

(2) CSS類屬性

<div [ngClass]="borderClass"></div>   

// JavaScript    
this.borderClass = {active: !this.isTrue};   

// css  
div.active {   
  border: 2px solid blue;  
}

只有當isTrue變量的值為true時，active樣式類才會添加到div上。 當然，也可以將鍵值對對象直接添加到屬性值中：

<div [ngClass]="{active: isTrue}">Active類</div>

單個CSS類

<div [class.active]="isActive">單個Active類</div>   

this.isActive = true;

只有當isActive為true時，active樣式類才會添加到div上。 (3) 樣式屬性 設(shè)置單個style

<div [style.background-color]=""></div>

還可以加單位(px, %, em等)：

<div [style.font-size.px]="20">20px</div>

ngStyle

<div [ngStyle]="backgroundStyle">樣式屬性</div>   

this.backgroundStyle = { 'background-color': this.isActive ? 'red' : 'blue'};

當變量isActive為true時，背景色設(shè)置為red，否則被設(shè)置為blue。 推薦使用這種方式。 注意，樣式屬性命名方法可以用中線命名法，像上面的一樣 也可以用駝峰式命名法，如fontSize。 (4) attribute

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

這種用法一般是不存于JavaScript中的屬性。 注意：

• 不能在屬性綁定表達式中對任何東西賦值，也不能使用自增、自減運算符。
• 只有當屬性值是字符串時，屬性才可以去掉雙方括號。
• 當屬性沒有加雙方括號時，右側(cè)的屬性值會統(tǒng)一當作字符串處理。
• 當屬性被雙括號包裹時，右側(cè)的屬性值必須是表達式

(5) 雙向綁定 雙向綁定使用ngModel：

<input [(ngModel)]="name">  
<p>{{name}}</p>

注意：要使用雙向綁定，必須導入FormsModule：

// app/app.module.ts   
import { FormsModule } from '@angular/forms';   

@NgModule({   
  declarations: [...],   
  imports: [   
    ...     
    FormsModule   
  ],   
  providers: [],   
  bootstrap: [AppComponent]  
})

當你要監(jiān)聽ngModel時，可以這樣：

<input [(ngModel)]="tel" (ngModelChange)="modelChagne($event.target.value)">  
<p>{{tel}}</p>

事件綁定 事件綁定使用中括號()，比如添加點擊事件：

<div (click)="onClick()"></div>

類似原生的JavaScript事件，Angular中每個事件監(jiān)聽函數(shù)都會有一個$event作為參數(shù)返回：

<input [(ngModel)]="phone"  (blur)="onBlur($event)">    

onBlur(event: any) {   
  alert(event.target.value);   
}

上面的代碼表示當input失去焦點時，獲取input的值并且彈出。

如發(fā)現(xiàn)任何問題或有好的建議，歡迎在下方評論留言。