组件的生命周期由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
在组件使用<ng-content>
将外部内容潜入到组件视图后执行,在第一次ngDoCheck后执行,并且只执行一次。
ngAfterContentChecked
在组件使用<ng-content>
将外部内容潜入到组件视图后,或它每次发生变化时执行
ngAfterViewInit
在该组件和其所有子组件以及视图创建完成后执行
ngAfterViewChecked
在该组件和其所有子组件以及视图创建完成后执行一次,并且每次子组件变化时执行
ngOnDestory
在销毁指令或组件之前触发。一般在此执行一些不会被垃圾回收器自动回收的资源的销毁工作。