angular4学习记录 -- 组件通信、生命周期

angular4 组件通信、生命周期

主要通信形式

1. 父组件经过属性绑定到子组件，子组件经过事件传递参数到父组件
2. 父组件经过局部变量获取子组件的引用
3. 父组件使用@ViewChild获取子组件的引用
4. 两个不相关联的组件使用中间人模式交互
5. 终极大招:建立一个服务注入到组件中
6. 直接把父组件当作服务注入到子组件中

组件的输入输出属性

输入输出属性必须是在有父子关系的组件间使用

输入属性

@Input() 
private keyword: string;

输出属性

@Output()
searchResult: EventEmmiter<any> = new EventEmmiter();

使用中间人模式传递数据

组件生命周期以及angular的变化发现机制

生命周期

• constructor

  构造函数。

• ngOnchanges

  绑定属性发生变化的时候调用，第一次调用必定在ngOnInit以前。

• ngOninit

  第一轮ngChanges以后调用，本钩子只调用一次。

• ngDoCheck

  在ngOnInit和ngDoCheck以后，会一直检查。

• ngAfterContentInit

  当内容投影进组件以后调用。第一次ngDoCheck以后调用，只调用一次，只适用于组件。父组件调用完成以后，全部子组件才会调用。

• ngAfterContentChecked

  每完成被投影组件内容发生变化时调用。ngAfterContentInit和ngDocheck以后调用，只适用于组件。父组件调用完成以后，全部子组件才会调用。

• ngAfterViewInit

  初始化完成组件试图及其子视图以后调用。第一次ngAfterContentChecked以后调用，只调用一次，只适用于组件。全部子组件调用完成以后，父组件才会调用。此阶段更改属性的值会报错，可在settimeout后运行。

• ngAfterViewChecked

  每次作完组件视图和子组件视图的变动检测以后调用。ngAfterViewInit和ngAfterContentChecked以后调用，只适用于组件。全部子组件调用完成以后，父组件才会调用。此阶段更改属性的值会报错，可在settimeout后运行。

• ngDoDestory

  组件销毁时调用，主要用于内存回收。路由跳转时组件会销毁。

执行顺序：

constructor
    ↓
ngOnChanges
    ↓  
ngOnInit
    ↓
ngDoCheck
    ↓
ngAfterContentInit
    ↓
ngAfterContentChecked
    ↓
ngAfterViewInit
    ↓
ngAfterViewChecked

ngDoCheck
    ↓
ngAfterContentChecked
    ↓
ngAfterViewChecked
    ...
ngDestory

angular的变化发现机制

default策略

不管变动发生在哪一个组件上，zone.js都将会检查整个angular组件树，从根组件appComponent开始，直至全部组件所有检查完成。

onpush策略

onpush策略是当组件的输入属性发生变动时才会检查当前组件及其子组件。