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

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

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

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

<img [src] = "imgUrl">

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

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

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

事件綁定

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

小括號表示這是一個事件綁定厅目。
input表示事件的名稱番枚。
onInputEvent表示當(dāng)事件發(fā)生時，執(zhí)行的表達(dá)式损敷。其中$event表示的是瀏覽器事件對象葫笼。

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

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

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

在組件中實現(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á)式和屬性綁定是一個東西诱桂。

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

<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：一個回調(diào)函數(shù)集合，它知道怎么去監(jiān)聽被Observable發(fā)送的值怀薛。
訂閱Subscription：表示一個可觀察對象刺彩，主要用于取消注冊。
操作符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();

通常我們需要使用管道實現(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)在的時間是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today:Date = new Date();

頁面上會顯示現(xiàn)在的時間是2017年05月08日10時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ù)}時畏线，會自動補(bǔ)0
當(dāng)小數(shù)位數(shù)多于規(guī)定的{最多小數(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時不顯示0156.55這里的′USD′是美元UnitedStatesdollar的縮寫寝殴，當(dāng)為false時不顯示符蒿叠，當(dāng)為true時，則顯示$符杯矩。后面的規(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>

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

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

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