概念
Angular中的數據綁定指的是同一組件中控制器文件(.ts)與視圖文件(.html)之間的數據傳遞。
分類
流向
單向綁定
它的意思是要么是ts文件為html文件賦值，要么相反。
ts->html
<div>
<img src="{{imgUrl}}">
<img [src]="imgUrl">
</div>
html->ts
<input (keyup)="press($event)">
小結：ts->html使用插值表達式{{value}}或[attr],html->ts使用(event)。ts->html較為常用。
雙向綁定
ts文件與html文件中綁定的值同時改變。
下列代碼表示當HTML文件輸入框內容改變時，ts文件的屬性name的值同時改變。
<input [(ngModel)]="name">
它的作用等於：
html
<input [value]="name" (input)="doOnInput($event)">
ts
doOnInput(event: any) {
this.name = event.target.value;
}
目標
Dom屬性
首先看看Dom屬性和HTML屬性的關系：
<!--Dom屬性綁定-->
<input value="Yan" (input)="doOnInput($event)">
HTML屬性
上面已經提到，colspan沒有對應的Dom屬性，只能使用HTML屬性綁定：
<!--html屬性綁定-->
<table border="solid">
<tr>
<!-- 以下表達式會報錯：colspan不是td的屬性
<td [colspan]="colspanSize">hello</td>
-->
<td [attr.colspan]="colspanSize" align="center">hello</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>哈哈</td>
</tr>
</table>
protected colspanSize: number = 2;
類綁定
<!--單一類的控制-->
<div class="a b" [class.c]="isBig">判定是否有c類:{{isBig}}</div>
<!--多個類的控制-->
<div [ngClass]="divClasses">是否有類a：{{divClasses.a}}、b：{{divClasses.b}}和c：{{divClasses.c}}</div>
<!--以下兩種方式效果相同，均為divClass的值'fontRedClass'-->
<div [class]="divClass">紅色字體</div>
<div class="{{divClass}}">紅色字體</div>
protected divClass = 'fontRedClass';
protected divClasses: any = {
a: Math.random() < 0.5,
b: Math.random() < 0.5,
c: Math.random() < 0.5
};
.fontRedClass {
color:red;
}
.a {
background: yellowgreen;
}
.b {
font-family: 華文隸書;
}
.c {
font-size: 20px;
}
樣式綁定
<!--單一樣式綁定-->
<div [style.color]="isRed?'red':'green'">單一樣式綁定</div>
<!--多個樣式綁定-->
<div [ngStyle]="divStyles">多個樣式綁定</div>
protected isRed = Math.random() < 0.5;
protected divStyles: any = {
color: 'red',
background: 'yellowgreen'
};
響應式編程
響應式編程主要是通過觀察者模式實現，在Angular中的Rxjs即是它的具體實現，它們的關系如下：
在Rxjs中，觀察者模式的基本實現如下：
Observable類似於java中的Stream。
上圖只是簡單的數組流，實際上，萬物皆可用流處理，比如頁面上的按鈕點擊事件：
import {Observable} from 'rxjs/';
let button = document.querySelector('button');
Observable.fromEvent(button,'click');
使用formControl來監聽輸入的值，並用流的方式處理（打印）：
<!--響應式編程-->
<input [formControl]="formControl">
注意：要使用[formControl]需要在app.module.ts中引入模塊ReactiveFormsModule。
import {FormControl} from '@angular/forms';
protected formControl: FormControl = new FormControl();
constructor() {
this.formControl.valueChanges
.debounceTime(500).subscribe(bookname => this.print(bookname));
}
模板變量
模板變量是在html標簽上使用#開頭來定義的變量，它代表html元素本身。
<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">
onKeyUp(param: any) {
let iInput;
try {
iInput = param.target.value;
} catch (e) {
iInput = param;
}
console.log(iInput);
}
管道
管道是用來對輸入的數據進行處理，如大小寫轉換、數值和日期格式化等。
基礎知識不再贅述，請看推薦博客：
Demo：
- 生成組件
ng g component pipe - html
<p>我的生日是：{{birthday | date:'yyyy-MM-dd'}}</p>
<p>我的名字是：{{name | uppercase}}</p>
<p>我的存款是：{{deposit | number:'2.2-2'}}萬</p>
- ts
protected birthday:Date = new Date(1989,1,19);
protected name:string = 'Vito';
protected deposit:number = 1.23456;
- 自定義管道
age:ng g pipe pipe/age
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'age'
})
export class AgePipe implements PipeTransform {
transform(value: any, args?: any): any {
let year: number = new Date().getFullYear();
let res:string;
if (args)
{
res = (year- value.getFullYear()+ 1) +'(虛)';
} else {
res = year- value.getFullYear() +'';
}
return res;
}
}
- html中新增
<p>我的年齡是：{{birthday | age:true}}歲</p>
- 效果
