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属性绑定

<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],