Angular学习笔记04——绑定和管道

##绑定 示例：
<h1>{{product.title}}</h1>插值表达式
<img [src] = 'imgUrl'>属性绑定
<button (click)="toProductDetail()>商品详情</button>"事件绑定
###事件绑定 语法：
<input (input)="onInputEvent($event)"
这里可以是绑定方法，也可以直接给属性赋值如：
<button (click)="saved = true">
###DOM属性绑定 语法：
<input [value]="XXX"/>XXX对应组件内的表达式，而不是字符串 ###HTML属性绑定 语法：
1、基本html属性绑定：
<td [attr.colspan]="tableColspan">Something</td>
2、css类绑定：
<div class="aaa bbb" [class]="someExpection">something</div>
<div [class.special]="isSpecial">something</div>
<div [ngclass]="{aaa:isA,bbb:isB}">something</div>
3、样式绑定：
<button [style.color]="isSpecial?'red':'green'">Red</button>
<div [ngStylr]="{'font-style':this.canSave?'italic':'normal'}">

###html属性和DOM属性 1、少量的HTML属性和DOM属性之间有着1对1的映射，如id 2、有些HTML属性没有对应的DOM属性，如colsapn 3、有些DOM属性没有对应的HTML属性，如textContent 4、就算名字相同，HTML属性和DOM属性也不是一个东西 5、HTML属性的值指定了初始值；DOM属性的值表示当前值。
HTML属性的值不能改变；DOM属性的值可以改变 6、模板绑定是通过DOM属性和事件来工作的，而不是HTML属性。

###双向绑定 语法：
<input [(ngModel)]="name">{{name}}
需要导入formsModule

###响应式编程 观察者模式 rxjs
需要在主模块引入ReactiveFormModule
示例：

Observable.from([1,2,3,4])  //生成一个1234的流
	.filter( e => e%2 ==0)	//对流处理，取出偶数
	.map( e => e*e )		//对流二次处理，平方
	.subscribe(				//对流进行订阅
		e => console.log(e),			//回调函数进行实际处理
		err => consele.error(err),
		() => console.log("结束啦！")	//流结束	
	)
复制代码

模板本地变量：
用#声明<input #myField (keyup)="onKey(myField.value)">

onKey(value: String){
	console.log(value);
}
复制代码

响应式编程示例：
实现输入框内进行搜索查询，若500ms内继续输入，则不发送后台请求，否则认为当前输入内容即是需要的搜索内容
<input [formControl]="searchInput">

searchInpt: FormControl = new FromControl();//FromControl模块是用来提供响应式流的模块。
constructor(){
	this.searchInput.valueChanges
		.debounceTime(500)
		.subscribe(
			something =>this.getSomeThing(something)
		);
}
getSomeThing(value: String){
	//后台查询操作...
}
复制代码

###管道 angular中使用管道将接受的数据进行处理，然后输出出去。
angular自带十几种管道，示例：
<p>我的生日是{{birthday | date | uppercase | XXXX}}</p>
<p>我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>圆周率是：{{pi | number:'2.1-4'}}</p>
|是管道中的管道连接符，链接多个管道 ####自定义管道 ng g pipe XXXXX生成一个管道的命令行

@Pipe({
	name:'XXXpipe'  //管道装饰器标签，name是使用它的唯一标识
})
export class XXXPipe implements PipeTransform{
	//默认方法  实现对输入管道的数字进行乘积，若只传入一个数字，则返回0
	transform(value: number, args?: number): any {
		if(!args){
			args=0;
		}
		return number*args;
	}
		
}
复制代码

转载于:https://juejin.im/post/5a2defa5518825296421a196