angularjs2 组件的生命周期

来源:互联网 发布:第一批网络主播黑名单 编辑:程序博客网 时间:2024/05/29 16:00

组件的生命周期由angular内部管理,从组件的创建、渲染到数据变动,再到dom中移除。这期间每个环节都有angular提供的一系列钩子。通过钩子可以让开发者很方便的在这些事件触发的时候执行响应的回调函数。

生命周期钩子

angular会顺序执行以下钩子方法

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestory

ngOnChanges

angularjs1.x 中需要通过scope.watch,然后在每次脏检查中判断是否数据有变化。在angular2中只要在组件中定义ngOnChanges 方法,在输入输出就会自动被调用。
ngOnChanges 当且仅当输入数据变化时才会被调用,即通过@Input()显式指定的输入变量。

ngOnInit

这个钩子主要用于数据绑定输入属性之后初始化组件。该方法会在第一次执行ngOnChanges后被调用

使用ngOnInit的2个情况(《揭秘Angular2》):
+ 组件构造不久后就要进行复杂的初始化
+ 需要输入属性设置完成之后才构建组件

该方法一般都用在初始化组件数据。通过angular cli 创建的组件中,一般会默认自动实现 ngOnInit接口

ngDoCheck

用于检测变化。与ngOnChanges区别在于 ngDoCheck检测的粒度更细。一个组件中不应该同时出现ngOnChanges和ngDoCheck

ngAfterContentInit

在组件使用将外部内容潜入到组件视图后执行,在第一次ngDoCheck后执行,并且只执行一次。

ngAfterContentChecked

在组件使用将外部内容潜入到组件视图后,或它每次发生变化时执行

ngAfterViewInit

在该组件和其所有子组件以及视图创建完成后执行

ngAfterViewChecked

在该组件和其所有子组件以及视图创建完成后执行一次,并且每次子组件变化时执行

ngOnDestory

在销毁指令或组件之前触发。一般在此执行一些不会被垃圾回收器自动回收的资源的销毁工作。

原创粉丝点击