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
↓
ngAfterViewCheckedngDoCheck
↓
ngAfterContentChecked
↓
ngAfterViewChecked
...
ngDestory

angular的变化发现机制

default策略

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

onpush策略

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