[无名弟子]JS-吴彦澄|2017年05月22日的日报-技能树.IT修真院

发表于： 2017-05-22 22:43:31

2 1026

今天完成的事情：

输入属性@Input装饰器是用来定义模块的输入的，用来让父模块往子模块传递内容

输出属性@Output装饰器是用来定义模块的输出的，用来让子模块往父模块传递内容

父级组件可以充当中间人模式,在两个子级传递数据中中介

然后学习了组件的生命周期钩子

constructor()初始化构造函数

ngOnChanges()数据每变化一次检查一次,组件树下所有组件全部检查一次

ngOnInit()数据化初始化

ngDoCheck()数据初始化检查

ngAfterContentInit()进入投影组件时会调用

ngAfterContentChecked()投影组件变更检测完成之后会调用一次

ngAfterViewInit()渲染视图时初始化，如果此时再更改数据会导致angular报错，可以设置timeout解决（异步编程）

ngAfterViewChecked()视图渲染完成后会检查

ngOnDestroy()组件执行路由到其他组件的时候会触发回收钩子这个钩子通常可以用来销毁数据，或者做页面组件的初始化，第二次跳转进这个页面的时候才不会有遗留信息问题

利用自定义管道来搜索引擎,angular内置很多管道需要 import pipe 管道 model

@Pipe装饰器来定义一个自定义管道

里面的name参数用来设置这个管道的名字

通过@pipe装饰器来产生的管道是对其他组件可见的 transform有两个必填参数管道传入的类型自定义管道的类型第三个参数可选

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {

transform(list: any[], filterField:string, keyword:string): any {
if(!filterField || !keyword) {
return list;
}
return list.filter( item => {
let fiedlValue = item[filterField];
return fiedlValue.indexOf(keyword) >=0;
} );
}
}