数据绑定可以将组件、控制器的属性和方法，和组件的模版连接起来，大大降低了开发时的编码量。例如：
6.jpg
<1>事件绑定
例如：
7.jpg
1.新建一个项目
ng new dataPro
2.新建一个组件
ng g component bind
3.修改bind组件模版 -- bind.component.html
<p>
bind works!
</p>
<!-- $event 是把当前点击的事件传过去 -->
<button (click)="doOnClick($event)">事件绑定</button>
4.修改bind组件控制器 -- 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 {
constructor() { }
ngOnInit() {
}
// 1.写一个doOnClick()方法
// 2.接收一个任意属性的事件 event:any
doOnClick(event:any) {
console.log(event);
}
}
5.将组件添加到app组件中 -- app.component.html
<h3>事件绑定测试</h3>
<app-bind></app-bind>
6.结果
8.jpg
点击后，控制台中输出
9.jpg
<2>dom属性绑定
12.jpg
插值表达式其实就是dom属性绑定
1.修改bing.component.html
<p>
bind works!
</p>
<!-- 写法一:用[]的方式把属性括起来，通过控制器的imgUrl来给src赋值 -->
<img [src]="imgUrl"><br><br>
<!-- 写法二:用插值表达式来写 -->
<img src="{{imgUrl}}">
2.控制器中定义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属性的区别
(1)修改bind模版 -- bind.component.html
<p>
bind works!
</p>
<!-- input标签的value属性设为了tom -->
<input type="text" value="tom" (input)="doOnInput($event)">
(2)修改bind.component.ts
doOnInput(event:any) {
// 1.输出dom属性
console.log("dom属性："+event.target.value);
//2.输出html属性
console.log("html属性："+event.target.getAttribute("value"));
}
(4)结果
当修改input的内容时，控制台中打印出
10.jpg
(5)总结
1. HTML属性的值指定了初始值；在这里一开始设置了value=“tom”，所以它一直都是tom，如果一开始没有设置value的值，那么它就一直为null;
DOM属性的值表示当前值。DOM属性的值可以改变；当表单的value属性变化时，它的值也跟着变化；
2. 模版绑定是通过DOM属性和事件来工作的，而不是HTML属性
3.少量HTML属性和DOM属性之间具有1：1的映射，如id
4. 有些HTML属性没有对应的DOM属性，如colspan
5. 有些DOM属性没有对应的HTML属性，如textContent
6. 就算名字相同，HTML属性和DOM属性也不是同一样东西
】
<3>html属性绑定
1.基本html属性绑定
//模版中
<table>
<tr>
<!-- 属性前面加attr前缀，值为后台传来的size变量 -->
<td [attr.colspan]="size">基本html属性绑定</td>
</tr>
</table>
//控制器中声明变量
size:number = 2;
11.jpg
2.CSS类绑定
(1)class全替换
//模版中
<div [class]="divClass">css类属性绑定</div>
//控制器中
// 一开始divClass的值为空
divClass:string;
constructor() {
// 设置定时函数，将divClass设为a,b,c
// css文件中定义了a为黄背景，b为红字，c为60px字体大小
//最后效果是3秒后会将a,b,c赋值给class
setTimeout(()=>{
this.divClass = 'a b c';
},3000)
}
(2)部分class固定，切换单一class
//模版中
<!-- a,b为固定的,c为通过后台isBig(boolean)的值来确定是否加上去 -->
<div class="a b" [class.c]="isBig">css类属性绑定</div>
//控制器中
//刚开始为false,即不加上c
isBig:boolean = false;
constructor() {
// 3秒后加上c
setTimeout(()=>{
this.isBig = true;
},3000)
}
(3)切换多个class
//模版中
<!-- ngClass需要一个key:value的对象 -->
<!--key是类名，value为boolean，为true则添加对应的key到calss中-->
<div [ngClass]="divClass">css类属性绑定</div>
//控制器中
divClass:any = {
a:false,
b:false,
c:false
}
constructor() {
//3秒后设为true
setTimeout(()=>{
this.divClass = {
a:true,
b:true,
c:true
}
},3000)
}
3.style样式绑定
(1)单个style
//模版中
<!-- 当isDev为true,则color为red,反之为blue -->
<div [style.color] = "isDev?'red':'blue'">style样式绑定</div>
//控制器中
isDev:boolean = true;
(2)当属性带有单位时
//模版中
<!-- .px即为font-size的单位 -->
<div [style.fone-size.px] = "isDev?14:16">style样式绑定定</div>
(3)设置多个style
//模版中
<div [ngStyle] = "divStyle">css类属性绑定</div>
//控制器中
divStyle:any = {
color: 'red',
background:'yellow'
};
constructor() {
//3秒后修改样式
setTimeout(()=>{
this.divStyle = {
color: 'yellow',
background:'red'
};
},3000)
}
<4>双向绑定
双向绑定可以使视图和模型保持一致，无论哪一方进行改变，另一方都能立即同步。
//模版中
//ngModel仅适用于文本，文本框等既能修改，又能显示的标签
//下面代码的作用:当模版中输入框内容改变时，控制器中属性name的值同时改变。
<input [(ngModel)]="name" name="test"> <br>
{{name}}
等同于：
<input [value]="name" (input)="doOnInput($event)"><br>
{{name}}
//控制器中
export class BindComponent implements OnInit {
//1.定义变量name
name:string;
constructor() {
//2.三秒后将tom赋值给name
setInterval(()=> {
this.name="tom";
},3000)
}
ngOnInit() {
}
// 3.doOnInput把变量name改成当前input的value属性的值
doOnInput(event) {
this.name = event.target.value;
}
}
ps:若报错
Can't bind to 'ngModel' since it isn't a known property of 'input'
报错原因 ：app.module.ts中没有import FormsModule
解决方式：在app.module.ts中引入FormsModule
13.jpg
<5>响应式编程
1.rxjs
响应式编程主要是通过观察者模式实现，在Angular中的Rxjs即是它的具体实现。
2.模版变量
模板变量是在html标签上使用#开头来定义的变量，它代表html元素本身。
//模版中
<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">
//控制器
onKeyUp(param: any) {
let iInput;
try {
iInput = param.target.value;
} catch (e) {
iInput = param;
}
console.log(iInput);
}
<6>管道
常用管道：
（1）date：
14.png
15.png
（2）uppercase：字母大写
（3）lowercase：字母小写
（4）number：数字格式化
16.png
2：表示两位整数
2-2：表示两位小数，其中前面的2表示最少显示2位，后面的2表示最 多显示2位，超出部分四舍五入，不足部分补0
（5）async：异步管道，用来处理异步的流
（6）自定义管道
1.生成管道
ng g pipe pipeflie/multiple
ps:管道和组件一样，需要声明在app.module.js里的declarations里面
2.修改multiple.pepe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'multiple'
})
export class MultiplePipe implements PipeTransform {
transform(value: number, args?: number): any {
if(!args){
args = 1;
}
return value * args;//返回乘积
}
}
3.定义变量
size:number = 2;
4.修改模版
<p>自定义管道测试{{size | multiple :'5'}}</p>
5.结果
17.png
网友评论