单向数据绑定
使用插值表达式将一个表达式的值显示在模板上。
<h1>{{productTitle}}</h1>事件绑定
使用小括号将组建控制器的一个方法绑定为模板上一个事件的处理器。
<button (clcik)="toProductDetail()">商品详情</button>
Dom属性绑定
<input value="Tom" (input)="doOnInput($event)">.ts
doOnInput(event: any) {
console.log(event.target.value);//Dom属性
console.log(event.target.getAttribute('value'));//Html属性
}HTML属性绑定与Dom属性绑定的区别
- 少量HTML属性和DOM属性之间有着1：1的映射，如id
- 有些HTML属性没有对应的DOM属性，如colspan
- 有些DOM属性没有对应的HTML属性，如textContent
- 就算名字相同,HTML属性和DOM属性也不是同一样东西
- HTML属性的值指定了初始值；DOM属性的值表示当前值。
- DOM属性的值可以改变；HTML属性的值不能改变
模板绑定是通过DOM属性和事件来工作的，而不是HTML属性
插值表达式就是DOM属性绑定
HTML属性绑定
使用方括号将HTML标签的一个属性绑定到一个表达式上
<img [src] = "imgUrl">基本HTML属性绑定
<td [attr.colspan]="tableConlspan">Something</td>因为有的控件的属性没有DOM属性，所以只能使用HTML属性绑定的方式
<table>
<tr>
<td colspan="{{1+1}}">学习使人进步</td>
</tr>
</table>
使用HTML绑定
<table>
<tr>
<td [attr.colspan]="size">学习使人进步</td>
</tr>
</table>size:number = 2;这种方式可以顺利绑定。
CSS类绑定
示例：
不使用CSS类绑定的情况
bind.component.html
<div class="a b c">
学习让人进步
</div>bind.component.css
.a{
background-color: yellow;
}
.b{
color: red;
}
.c{
font-size: 60px;
}使用CSS样式绑定
bind.component.html
<div [class]="divClass">
学习让人进步
</div>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
divClass:string;
constructor() {
setTimeout(()=>{
this.divClass ="a b c";
},3000)
}
ngOnInit() {
}
}
或者这样
<div class="a b" [class.c]="isBig">
学习让人进步
</div>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
isBig:boolean = false;
constructor() {
setTimeout(()=>{
this.isBig =true;
},3000)
}
ngOnInit() {
}
}
或者使用ngClass
<div [ngClass]="divClass">
学习让人进步
</div>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
divClass: any = {
a: false,
b: false,
c: false
};
constructor() {
setTimeout(()=> {
this.divClass = {
a: true,
b: false,
c: true
};
}, 3000)
}
ngOnInit() {
}
}
样式绑定
<div [style.color] = "isDev ? 'red':'blue'">
学习让人进步
</div><div [style.font-size.em] = "isDev ? 3:1">
学习让人进步
</div>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
isDev: boolean = true;
constructor() {
setTimeout(()=> {
this.isDev = false;
}, 3000)
}
ngOnInit() {
}
doOnInput(event: any) {
console.log(event.target.value);//Dom属性
console.log(event.target.getAttribute('value'));//Html属性
}
}
使用ngStyle
<div [ngStyle]="divStyle">
学习让人进步
</div>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
divStyle:any = {
color:'red',
backgroundColor:'yellow'
};
constructor() {
setTimeout(()=> {
this.divStyle = {
color:'yellow',
backgroundColor:'red'
};
}, 3000)
}
ngOnInit() {
}
}
双向绑定
双向绑定可以使视图和模型产生同步改变，一般我们在实际开发中，开发带有编辑功能的表单就可以使用双向绑定。
有时候我们可能需要有这样的需求：输入的值和显示的值一致
<input (input)="doOnInput($event)" [value]="name">
{{name}}import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
name:string;
constructor() {
setInterval(()=>{
this.name = "Tom";
},2000)
}
ngOnInit() {
}
doOnInput(event: any) {
this.name = event.target.value;
}
}
那么我们需要像上面一样既要写属性绑定，又要写事件绑定嘛？不需要，我们可以使用ngModel做双向绑定
<input [(ngModel)]="name">
{{name}}管道
<p>
管道Demo
</p>
<p>我的生日是{{birthday}}</p>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
birthday:Date =new Date;
constructor() {
}
ngOnInit() {
}
}
使用管道
<p>
管道Demo
</p>
<p>我的生日是{{birthday | date}}</p><p>
管道Demo
</p>
<p>我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}</p>使用多个管道
<p>
管道Demo
</p>
<p>我的生日是{{birthday | date | uppercase}}</p>管道可以添加多个
- uppercase 转换大写
- lowercase 转换小写
<p>圆周率是{{pi | number:'2.1-4'}}</p>
<!--1-4 的意思是前面的1，是最小小数保持几位，第二个4表示最多小数保持几位-->async 管道可以处理页面上的流，后面会详细讲解
自定义管道
ng g pipe pipe/multiple
multiple.pipe.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;
}
}
value是传入值，args是参数
bind.component.html
<p>
管道Demo
</p>
<p>我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>圆周率是{{pi}}</p>
<p>试试我自己写的管道{{pi | multiple:5}}</p>