數(shù)據(jù)綁定可以將組件渤刃、控制器的屬性和方法玛臂，和組件的模版連接起來彻亲，大大降低了開發(fā)時的編碼量胜茧。例如：
6.jpg
<1>事件綁定
例如：
7.jpg
1.新建一個項目
ng new dataPro
2.新建一個組件
ng g component bind
3.修改bind組件模版 -- bind.component.html
<p>
bind works!
</p>
<!-- $event 是把當(dāng)前點擊的事件傳過去 -->
<button (click)="doOnClick($event)">事件綁定</button>
4.修改bind組件控制器 -- bind.component.ts
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() {
}
// 1.寫一個doOnClick()方法
// 2.接收一個任意屬性的事件 event:any
doOnClick(event:any) {
console.log(event);
}
}
5.將組件添加到app組件中 -- app.component.html
<h3>事件綁定測試</h3>
<app-bind></app-bind>
6.結(jié)果
8.jpg
點擊后，控制臺中輸出
9.jpg
<2>dom屬性綁定
12.jpg
插值表達式其實就是dom屬性綁定
1.修改bing.component.html
<p>
bind works!
</p>
<!-- 寫法一:用[]的方式把屬性括起來骗炉，通過控制器的imgUrl來給src賦值 -->
<img [src]="imgUrl"><br><br>
<!-- 寫法二:用插值表達式來寫 -->
<img src="{{imgUrl}}">
2.控制器中定義imgUrl -- bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
// 定義imgUrl
imgUrl:string = "http://placehold.it/400x200";
constructor() { }
ngOnInit() {
}
}
【html屬性和dom屬性的區(qū)別
(1)修改bind模版 -- bind.component.html
<p>
bind works!
</p>
<!-- input標簽的value屬性設(shè)為了tom -->
<input type="text" value="tom" (input)="doOnInput($event)">
(2)修改bind.component.ts
doOnInput(event:any) {
// 1.輸出dom屬性
console.log("dom屬性："+event.target.value);
//2.輸出html屬性
console.log("html屬性："+event.target.getAttribute("value"));
}
(4)結(jié)果
當(dāng)修改input的內(nèi)容時照宝，控制臺中打印出
10.jpg
(5)總結(jié)
1. HTML屬性的值指定了初始值；在這里一開始設(shè)置了value=“tom”句葵，所以它一直都是tom厕鹃，如果一開始沒有設(shè)置value的值，那么它就一直為null;
????DOM屬性的值表示當(dāng)前值乍丈。DOM屬性的值可以改變剂碴；當(dāng)表單的value屬性變化時，它的值也跟著變化轻专；
2. 模版綁定是通過DOM屬性和事件來工作的忆矛，而不是HTML屬性
3.少量HTML屬性和DOM屬性之間具有1：1的映射，如id
4. 有些HTML屬性沒有對應(yīng)的DOM屬性，如colspan
5. 有些DOM屬性沒有對應(yīng)的HTML屬性催训，如textContent
6. 就算名字相同洽议，HTML屬性和DOM屬性也不是同一樣?xùn)|西
】
<3>html屬性綁定
1.基本html屬性綁定
//模版中
<table>
<tr>
<!-- 屬性前面加attr前綴，值為后臺傳來的size變量 -->
<td [attr.colspan]="size">基本html屬性綁定</td>
</tr>
</table>
//控制器中聲明變量
size:number = 2;
11.jpg
2.CSS類綁定
(1)class全替換
//模版中
<div [class]="divClass">css類屬性綁定</div>
//控制器中
// 一開始divClass的值為空
divClass:string;
constructor() {
// 設(shè)置定時函數(shù)漫拭，將divClass設(shè)為a,b,c
// css文件中定義了a為黃背景亚兄，b為紅字，c為60px字體大小
//最后效果是3秒后會將a,b,c賦值給class
setTimeout(()=>{
this.divClass = 'a b c';
},3000)
}
(2)部分class固定采驻，切換單一class
//模版中
<!-- a,b為固定的,c為通過后臺isBig(boolean)的值來確定是否加上去 -->
<div class="a b" [class.c]="isBig">css類屬性綁定</div>
//控制器中
//剛開始為false,即不加上c
isBig:boolean = false;
constructor() {
// 3秒后加上c
setTimeout(()=>{
this.isBig = true;
},3000)
}
(3)切換多個class
//模版中
<!-- ngClass需要一個key:value的對象 -->
<!--key是類名审胚，value為boolean，為true則添加對應(yīng)的key到calss中-->
<div [ngClass]="divClass">css類屬性綁定</div>
//控制器中
divClass:any = {
a:false,
b:false,
c:false
}
constructor() {
//3秒后設(shè)為true
setTimeout(()=>{
this.divClass = {
a:true,
b:true,
c:true
}
},3000)
}
3.style樣式綁定
(1)單個style
//模版中
<!-- 當(dāng)isDev為true,則color為red,反之為blue -->
<div [style.color] = "isDev?'red':'blue'">style樣式綁定</div>
//控制器中
isDev:boolean = true;
(2)當(dāng)屬性帶有單位時
//模版中
<!-- .px即為font-size的單位 -->
<div [style.fone-size.px] = "isDev?14:16">style樣式綁定定</div>
(3)設(shè)置多個style
//模版中
<div [ngStyle] = "divStyle">css類屬性綁定</div>
//控制器中
divStyle:any = {
color: 'red',
background:'yellow'
};
constructor() {
//3秒后修改樣式
setTimeout(()=>{
this.divStyle = {
color: 'yellow',
background:'red'
};
},3000)
}
<4>雙向綁定
雙向綁定可以使視圖和模型保持一致礼旅，無論哪一方進行改變膳叨，另一方都能立即同步。
//模版中
//ngModel僅適用于文本痘系，文本框等既能修改菲嘴，又能顯示的標簽
//下面代碼的作用:當(dāng)模版中輸入框內(nèi)容改變時，控制器中屬性name的值同時改變碎浇。
<input [(ngModel)]="name" name="test"> <br>
{{name}}
等同于：
<input [value]="name" (input)="doOnInput($event)"><br>
{{name}}
//控制器中
export class BindComponent implements OnInit {
//1.定義變量name
name:string;
constructor() {
//2.三秒后將tom賦值給name
setInterval(()=> {
this.name="tom";
},3000)
}
ngOnInit() {
}
// 3.doOnInput把變量name改成當(dāng)前input的value屬性的值
doOnInput(event) {
this.name = event.target.value;
}
}
ps:若報錯
Can't bind to 'ngModel' since it isn't a known property of 'input'
報錯原因 ：app.module.ts中沒有import FormsModule
解決方式：在app.module.ts中引入FormsModule
13.jpg
<5>響應(yīng)式編程
1.rxjs
響應(yīng)式編程主要是通過觀察者模式實現(xiàn)，在Angular中的Rxjs即是它的具體實現(xiàn)璃俗。
2.模版變量
模板變量是在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);
}
<6>管道
常用管道：
（1）date：
14.png
15.png
（2）uppercase：字母大寫
（3）lowercase：字母小寫
（4）number：數(shù)字格式化
16.png
2：表示兩位整數(shù)
2-2：表示兩位小數(shù)城豁，其中前面的2表示最少顯示2位苟穆，后面的2表示最 多顯示2位，超出部分四舍五入唱星，不足部分補0
（5）async：異步管道雳旅，用來處理異步的流
（6）自定義管道
1.生成管道
ng g pipe pipeflie/multiple
ps:管道和組件一樣，需要聲明在app.module.js里的declarations里面
2.修改multiple.pepe.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;//返回乘積
}
}
3.定義變量
size:number = 2;
4.修改模版
<p>自定義管道測試{{size | multiple :'5'}}</p>
5.結(jié)果
17.png
