欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Angular学习笔记(十)之数据绑定

程序员文章站 2024-03-22 23:35:34
...

数据绑定

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

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

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

  • 事件绑定
  • DOM属性绑定
  • HTML属性绑定

事件绑定

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

基本语法如下:
Angular学习笔记(十)之数据绑定

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学习笔记(十)之数据绑定
Angular学习笔记(十)之数据绑定
Angular使用DOM属性绑定,应优先使用DOM属性绑定

<input [value]="name"> [value]方括号语法,表示DOM属性value值和控制器中的name连结。

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

Angular学习笔记(十)之数据绑定

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属性绑定和浏览器的渲染过程
Angular学习笔记(十)之数据绑定
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],