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],
上一篇: 5.stack栈基本应用
下一篇: Angular入门之依赖注入