概念?
Angular中的数据绑定指的是:同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递。
数据绑定可以将组件、控制器的属性和方法,和组件的模板连接起来,这样就大大降低了开发时代码量。
例如事件绑定:
分类?
1、流向
(1)单向绑定:要么ts文件给html赋值,要么相反。
ts ? html
<div>
<img src = " {{ imgUrl }} ">
<img [ src ] = " imgUrl ">
</div>
html ? ts
<input (keyup)=" press($event) ">
小结:ts ? html 使用差值表达式 {{ value }}
或 attr
; html ? ts 使用(event)
。ts ? html 更常用。
(2)双向绑定
ts 文件和 html 文件中绑定的值同时改变。
下面的代码代表当 html 文件输入框内容改变时, ts 文件的属性name 的值同时改变。
<input [(ngModel)] = "name">
它的作用等同于:
html
<input [value]="name" (input)="doOnInput($event)">
ts
doOnInput(event: any) {
this.name = event.target.value;
}
2、目标
(1) DOM属性
差值表达式的效果等同于dom属性绑定。
①修改bind.component.html
<p>
bind works!
</p>
<!-- 写法一:用[]的方式把属性括起来,通过控制器的imgUrl来给src赋值 -->
<img [src]="imgUrl"><br><br>
<!-- 写法二:用插值表达式来写 -->
<img src="{{imgUrl}}">
②控制器中定义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 属性的区别
①修改bind模板-- bind.component.html
<p>
bind works!
</p>
<!-- input标签的value属性设为Rosie -->
<input type="text" value="Rosie" (input)="doOnInput($event)">
②修改bind.component.ts
doOnInput(event:any) {
// 1.输出dom属性
console.log("dom属性:"+event.target.value);
//2.输出html属性
console.log("html属性:"+event.target.getAttribute("value"));
}
结果:
当修改input 的内容时,控制台打印出
dom属性:Rosie1
html属性:Rosie
dom属性:Rosie12
html属性:Rosie
dom属性:Rosie123
html属性:Rosie
html属性 和 dom 属性的联系
a.少量HTML属性和DOM属性之间有着1:1的映射,如id
b.有些HTML属性没有对应的DOM属性,如colspan
c.有些DOM属性没有对应的HTML属性,如textContent
d.就算名字相同,HTML属性和DOM属性也不是同一样东西
e.HTML属性的值指定了初始值;DOM属性的值表示当前值。
DOM属性的值可以改变;HTML属性的值不能改变。
f.模板绑定是通过DOM属性和事件来工作的,而不是HTML属性。
(2) HTML属性
a. 基本html属性绑定
<!--html属性绑定-->
<table border="solid">
<tr>
<!-- 以下表达式会报错:colspan不是td的属性
<td [colspan]="colspanSize">hello</td>
-->
<td [attr.colspan]="colspanSize" align="center">hello</td>
</tr>
<tr>
<td>你好</td>
</tr>
</table>
// 在控制器中声明变量
protected colspanSize: number = 2;
b. CSS类绑定
<!--单一类的控制-->
<div class="a b" [class.c]="isBig">判定是否有c类:{{isBig}}</div>
<!--多个类的控制-->
<div [ngClass]="divClasses">是否有类a:{{divClasses.a}}、b:{{divClasses.b}}和c:{{divClasses.c}}</div>
<!--以下两种方式效果相同,均为divClass的值'fontRedClass'-->
<div [class]="divClass">红色字体</div>
<div class="{{divClass}}">红色字体</div>
protected divClass = 'fontRedClass';
protected divClasses: any = {
a: Math.random() < 0.5,
b: Math.random() < 0.5,
c: Math.random() < 0.5
};
.fontRedClass {
color:red;
}
.a {
background: yellowgreen;
}
.b {
font-family: 华文隶书;
}
.c {
font-size: 20px;
}
c. 样式(style)绑定
<!--单一样式绑定-->
<div [style.color]="isRed?'red':'green'">单一样式绑定</div>
<!--多个样式绑定-->
<div [ngStyle]="divStyles">多个样式绑定</div>
protected isRed = Math.random() < 0.5;
protected divStyles: any = {
color: 'red',
background: 'yellowgreen'
};