angular4 组件通讯、生命周期

时间:2022-09-18 14:35:13

主要通讯形式

  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策略是当组件的输入属性发生变更时才会检查当前组件及其子组件