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

##绑定 示例：

{{product.title}}

插值表达式
属性绑定
事件绑定
###事件绑定 语法：

这里可以是绑定方法，也可以直接给属性赋值如：

###DOM属性绑定 语法：
XXX对应组件内的表达式，而不是字符串 ###HTML属性绑定 语法：
1、基本html属性绑定：
Something
2、css类绑定：

something

something

something

3、样式绑定：
Red

###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属性。

###双向绑定 语法：
{{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("结束啦！")	//流结束	
	)
复制代码

模板本地变量：
用#声明

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

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

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

###管道 angular中使用管道将接受的数据进行处理，然后输出出去。
angular自带十几种管道，示例：

我的生日是{{birthday | date | uppercase | XXXX}}

我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}

圆周率是：{{pi | number:'2.1-4'}}

|是管道中的管道连接符，链接多个管道 ####自定义管道 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