Angular 數(shù)據(jù)綁定

數(shù)據(jù)綁定

<h1>{{productTitlt}}!</h1>

使用插值表達(dá)式將一個(gè)表達(dá)式的值顯示在模版上。

<img [src] = "imgUrl">

使用方括號將HTML標(biāo)簽的一個(gè)屬性綁定到一個(gè)表達(dá)式上。

<button (click)="toProductDetail()">商品詳情</button>

使用小括號將組件控制器的一個(gè)方法綁定為模版上一個(gè)事件的處理器。

事件綁定

<input (input)="onInputEvent($event)">

• 小括號表示這是一個(gè)事件綁定。
• input表示事件的名稱。
• onInputEvent表示當(dāng)事件發(fā)生時(shí)，執(zhí)行的表達(dá)式。其中$event表示的是瀏覽器事件對象。

首先聲明一個(gè)組件ng g component bind

編寫頁面模版，添加點(diǎn)擊事件按鈕。

<p>
  bind works!
</p>
<button (click)="doOnClick($event)">點(diǎn)我</button>

在組件中實(shí)現(xiàn)點(diǎn)擊事件的方法，并將瀏覽器事件對象輸出到控制臺顯示。

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

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }

  doOnClick(event: any) {
    console.log(event);
  }

}

屬性綁定

插值表達(dá)式和屬性綁定是一個(gè)東西。

修改頁面模版，使用屬性綁定。

<p>
  bind works!
</p>
<img [src]="imgUrl">

并且在組件中定義imgUrl

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

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  imgUrl: string = 'http://placehold.it/400x320';

  constructor() {
  }

  ngOnInit() {
  }

  doOnClick(event: any) {
    console.log(event);
  }

}

使用插值表達(dá)式改寫頁面模版。

<p>
  bind works!
</p>
<img [src]="imgUrl">
<img src="{{imgUrl}}">

Angular會將插值表達(dá)式翻譯為對應(yīng)的屬性綁定。

HTML屬性和DOM屬性的關(guān)系

• 少量HTML屬性和DOM屬性之間有著1:1的映射，如id。
• 有些HTML屬性沒有對應(yīng)的DOM屬性，如colspan。
• 有些DOM屬性沒有對應(yīng)的HTML屬性，如textContent。
• 就算名字相同，HTML屬性和DOM屬性也不是同一樣?xùn)|西。
• HTML屬性的值指定了初始值；DOM屬性的值表示當(dāng)前值。
• DOM屬性的值可以改變；HTML屬性的值不能改變。
• 模版綁定是通過DOM屬性和事件來工作的，而不是HTML屬性。

HTML屬性綁定

基本HTML屬性綁定

<td [attr.colspan]="tableColspan">Something</td>

CSS類綁定

<div class="aaa bbb" [class]="someExpression">something</div>

<div [class.special]="isSpecial">something</div>

<div [ngClass]="{aaa: isA, bbb: isB}">

樣式綁定

<button [style.color]="isSpecial?'red':'green'">RED</button>

<div [ngStyle]="{'font-style': this.canSave?'italic':'normal'}">

雙向綁定

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

響應(yīng)式編程

觀察者模式與Rxjs

var subscription = Observable.from([1,2,3,4])
    .filter((e) => e%2 == 0)
    .map((e) => e*e)
    .subscribe(
        e => console.log(e),
        error => consile.error(error),
        () => console.log("end!")
    );

• 可觀察對象Observable（流）：表示一組值或者事件的集合。
• 觀察者Observer：一個(gè)回調(diào)函數(shù)集合，它知道怎么去監(jiān)聽被Observable發(fā)送的值。
• 訂閱Subscription：表示一個(gè)可觀察對象，主要用于取消注冊。
• 操作符Operators：純粹的函數(shù)，使開發(fā)者可以以函數(shù)編程的方式處理集合。

簡單來說響應(yīng)式編程就是異步數(shù)據(jù)流編程。

模版本地變量

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
{{value}}

模版本地變量必須使用#號來聲明，也就是這里的#myField。這樣的話方法就不用再傳遞event對象了。

管道

<p>
  bind works!
</p>
<p>我的生日是：{{birthday | date | uppercase}}</p>

在組件中添加birthday元素。

private birthday: Date = new Date();

通常我們需要使用管道實(shí)現(xiàn)對數(shù)據(jù)的格式化，Angular4中的管道和之前有了一些變化，下面說一些常用的管道。

大小寫轉(zhuǎn)換管道

uppercase將字符串轉(zhuǎn)換為大寫
lowercase將字符串轉(zhuǎn)換為小寫

<p>將字符串轉(zhuǎn)換為大寫{{str | uppercase}}</p>

str:string = 'hello';

頁面上會顯示
將字符串轉(zhuǎn)換為大寫HELLO

日期管道

date日期管道符可以接受參數(shù)，用來規(guī)定輸出日期的格式。

<p>現(xiàn)在的時(shí)間是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today:Date = new Date();

頁面上會顯示現(xiàn)在的時(shí)間是2017年05月08日10時(shí)57分53秒

小數(shù)管道

number管道用來將數(shù)字處理為我們需要的小數(shù)格式
接收的參數(shù)格式為{最少整數(shù)位數(shù)}.{最少小數(shù)位數(shù)}-{最多小數(shù)位數(shù)}
其中最少整數(shù)位數(shù)默認(rèn)為1
最少小數(shù)位數(shù)默認(rèn)為0
最多小數(shù)位數(shù)默認(rèn)為3
當(dāng)小數(shù)位數(shù)少于規(guī)定的{最少小數(shù)位數(shù)}時(shí)，會自動補(bǔ)0
當(dāng)小數(shù)位數(shù)多于規(guī)定的{最多小數(shù)位數(shù)}時(shí)，會四舍五入

<p>圓周率是{{pi | number:'2.2-4'}}</p>

pi:number = 3.14159;

頁面上會顯示
圓周率是03.1416

貨幣管道

currency管道用來將數(shù)字轉(zhuǎn)換為貨幣格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>

a:number = 8.2515
b:number = 156.54812

頁面上將顯示
USD8.25
0156.55這里的′USD′是美元UnitedStatesdollar的縮寫，當(dāng)為false時(shí)不顯示0156.55這里的′USD′是美元UnitedStatesdollar的縮寫，當(dāng)為false時(shí)不顯示符，當(dāng)為true時(shí)，則顯示$符。后面的規(guī)定小數(shù)位數(shù)的參數(shù)和上面介紹的一樣。

自定義管道

創(chuàng)建pipe組件ng g pipe pipe/multiple

multiple.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

  transform(value: number, args?: number): any {
    if (!args) {
      args = 1;
    }
    return value * args;
  }

}

使用自己編寫的管道。

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
<p>這是我輸入的值：{{value | multiple}}</p>

這時(shí)的默認(rèn)系數(shù)是1，將系數(shù)改為3。

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
<p>這是我輸入的值：{{value | multiple: '3'}}</p>

這樣每次輸出的值都是乘后的值。