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

前端之家收集整理的这篇文章主要介绍了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策略是当组件的输入属性发生变更时才会检查当前组件及其子组件

原文链接:https://www.f2er.com/angularjs/146062.html

猜你在找的Angularjs相关文章