Angular4學習筆記（五）- 數據綁定、響應式編程和管道

概念

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);
 }

管道

管道是用來對輸入的數據進行處理，如大小寫轉換、數值和日期格式化等。

基礎知識再也不贅述，請看推薦博客：

• Angular 2 Pipe
• Angular最新教程-第十二節 管道Pipes 內置管道

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>

• 效果
  

Demo

數據綁定