##绑定
示例:
<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;
}
}