生命周期钩子
生命周期定义
从Angular实例化组件类, 渲染组件视图,子视图, 变更检测, 检查数据绑定属性何时发生变化,并按需更新视图和组件实例, 最后到Angular销毁组件实例并从DOM中移除它渲染的模板, 这整个过程就是生命周期.
钩子函数使用场景
来触发组件或者指令生命周期中的关键事件: 初始化新实例; 需要时启动变更检测; 在变更检测过程中响应更新; 在删除实例之前进行清理;
Angular core提供了生命周期钩子接口
Angular core库中定义了生命周期钩子接口 用来响应组件或者指令生命周期中的事件
1. ngOnChanges
在组件的 @Input属性发生变化时候调用 当Angular设置或重新设置数据绑定的输入属性时响应
2. ngOnInit
组件初始化完成 可以安全使用组件的属性和方法
3. ngDoCheck
angular中认为不应该在同一个组件定义ngOnChanges和ngDoCheck这两个钩子 他们两个想要达到的目的很类似的 angular框架帮助做脏值检测 理解成: 为什么属性变化会体现到视图中, 因为angular组件会对所有组件的状态进行维护, 进行一个检测 一旦有值发生变化,会去检测 ngOnChanges 是监听自己组件本身的属性变化, 自己主动关心 ngDocheck是Angular框架在做一个大的组件检查的时候, 到达组件时候会发生doCheck事件 框架帮忙做的
4. ngAfterContentInit
组件内容初始化, 当内容投影ng-content(插槽)完成时调用 当Angular把外部内容投影进组件视图或指令坐在的视图之后调用
5. ngAfterContentChecked
插槽里边内容的脏值检测
6. ngAfterViewInit
组件的视图初始化 一个组件和它的子组件初始化完成
7. ngAfterViewChecked 组件视图脏值检测完成
8. ngOnDestory
组件销毁时 一般用来清理缓存 清除掉setTimeInterval
调用顺序演示
看一下控制台的打印顺序
