Angular学习笔记（十）之数据绑定

数据绑定

数据绑定：将组件的控制器的属性和方法与模版连接起来

Angular默认使用单向数据绑定，双向数据绑定可选。AngularJs默认使用双向数据绑定，因为浏览器事件发生时，AngularJs会反复检查数据绑定表达式列表，直到所有数据都已经同步，但这样的做法相对来说更耗性能

数据绑定分为3种绑定形式

事件绑定

DOM属性绑定

HTML属性绑定

事件绑定

给一个事件指定一个处理方法

基本语法如下：



Tips:

- 等号右侧可以不是调用方法，可以是属性赋值

- 被绑定的事件可以是标准的DOM事件，也可以是任意事件（后续补充）

1.典型demo

//html:
<button (click)="onButtonClick($event)">事件绑定demo</button>
//ts:
onButtonClick(event){
console.log(event);
}

2.事件绑定之属性赋值

//html:
<button (click)="save = true">事件绑定demo</button>
<br>
<span>{{save}}</span>
//ts:
save:boolean = false;

DOM属性绑定

插值表达式=DOM属性绑定

插值表达式即使用双花括号 {{ }},DOM属性绑定只在属性上写方括号 [src]

<img src="{{imgUrl}}">

和

<img [src]="imgUrl">

其实是一样的写法。

HTML属性不等于DOM属性

//html
<input value="tom" (input)="onInput($event)">
//ts
onInput(event){
console.log(event.target.value);//输出DOM属性中value的值,会随着input的改变而改变
console.log(event.target.getAttribute("value"));//输出HTML属性中value的值,保持初始值不变
}

DOM是一个类型为HTML Input的Element对象，每个DOM都有属性和方法，在上方的input中，DOM的value属性值会初始化为TOM，但会根据之后的input进行改变

button的disabled属性

添加html属性disabled将会影响DOM属性，无论disabled是何值。而想动态使button可用或不可用，使用DOM属性的disabledkey可以实现

<button disabled>点我</button>

和

<button disabled="false">点我</button>

和

<button disabled="true">点我</button>

是一样的，都会造成按钮不可用

而使用DOM属性disabled：

//html
<button [disabled]="disabled" >点我</button>
//ts
disabled:boolean = true; //将使按钮不可用
disabled:boolean = false; //将使按钮可用

DOM属性绑定与HTML属性绑定不同

Angular使用DOM属性绑定，应优先使用DOM属性绑定

&
b8fa
lt;input [value]="name">

[value]方括号语法，表示DOM属性value值和控制器中的name连结。

Angular是如何通过DOM进行数据绑定的

1.Angular从控制器操作DOM属性

2.DOM属性不操作HTML属性的改变

3.浏览器的渲染会和DOM属性保持一致

4.DOM属性的改变不操作HTML属性

5.浏览器渲染效果的改变不影响HTML

总而言之，言而总之，浏览器的渲染会和DOM属性保持一致，但它们的改变不会影响HTML属性。

HTML属性绑定

在没有DOM属性可绑定的情况下使用HTML属性绑定

基本属性绑定

使用 [attr.属性]进行绑定

//html
<td [attr.colspan]="colspan">Something</td>
//ts
colspan:number = 10;

HTML属性绑定和浏览器的渲染过程



1.Angular从组件控制器将name绑定到html属性value上

2.Angular从组件控制器不操作DOM属性value

3.通过浏览器自动同步html元素和DOM对象，所以DOM获得新值

4.浏览器会保持DOM和UI的一致，所以Input显示IBM

CSS类绑定

[class]=”xxx”

//html:
<span class="yellow" [class]="newClass">第1段段测试文字</span>
//ts:
newClass:string = 'red blue';

[class]=”xxx”，xxx代表ts文件中的属性值，xxx会完全替代class值。也就是说，这里的newClass值会替代前面 class=”yellow”

[class.xxx]=”boolean”,名为xxx的类是否可用

//html:
<span [class.yellow]="isYellow">第2段测试文字</span>
//ts:
setTimeout(()=>{
this.isYellow = true;
},3000);

[class.yellow]=”isYellow”，ts文件中isYellow为true时，yellow类将会显示。否则则不显示。

[ngClass]=”{a:isa,b:isb}”,用于使用多个类时。｛key:value｝，key是类名，value是布尔值。

//html:
<span [ngClass]="divClass">第3段测试文字</span>
//ts:
setTimeout(()=>{
this.divClass = {
red:true,
yellow:true
}
},3000);

style样式绑定

单个样式绑定

//html:
<span [style.color]="isDev?'red':'blue'">style样式测试1</span>
<span [style.font-size.em]="isDev?'1':'3'">style样式测试2</span>
//ts:
isDev:boolean = false;
ngOnInit() {
setTimeout(()=>{
this.isDev = true;
},3000);
}

多个样式绑定 {key:value}, key是样式属性值，value是实际可用的值。如：{color:’red’}

//html:
<span [ngStyle]="divStyle">style样式测试333</span>
//ts:
divStyle:any = {
color:'red',
background:'yellow'
}

双向数据绑定 [(ngModel)]

视图和模型的双向绑定。无论哪一个先发生改变，都会导致另一个也发生改变。一般用于表单处理

//html:
<input [(ngModel)]="name">
//ts:
name:string;

Tips:

在app.module.ts中需导入

import {FormsModule} from "@angular/forms";

imports: [FormsModule],