Angular核心-组件的生命周期函数钩子函数

Angular核心-组件的生命周期函数钩子函数

• Angular核心-组件的生命周期函数钩子函数
  • constructor（）
  • ngOnChanges()
  • ngOnInit() 重点
  • ngDoCheck()
  • ngAfterContentInit()
  • ngAfterContentChecked()
  • ngAfterViewInit()
  • ngAfterViewChecked()
  • ngOnDestroy() 重点

angular手册地址： https://angular.cn/guide/lifecycle-hooks Angular中的组件的生命周期钩子函数调用顺序：

constructor（）

组件被创建的时候，其实他不算是真实意义上的生命周期函数

ngOnChanges()

组件绑定的值发生改变时。 如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。 注意，如果你的组件没有输入属性，或者你使用它时没有提供任何输入属性，那么框架就不会调用 ngOnChanges()。

ngOnInit() 重点

组件初始化完毕等同于Vue.js的mounted 在第一轮 ngOnChanges() 完成之后调用，只调用一次。而且即使没有调用过 ngOnChanges()，也仍然会调用 ngOnInit()（比如当模板中没有绑定任何输入属性时）。

ngDoCheck()

组件检查到了系统对自己的影响。 注意：紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。 注意：基本用不上。

ngAfterContentInit()

组件的内容初始化完成。

ngAfterContentChecked()

组件的内容发生变化需要检查

ngAfterViewInit()

组件的视图初始化完成。

ngAfterViewChecked()

组件的视图发生改变需要检查

ngOnDestroy() 重点

组件即将被从DOM树上卸载时 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。适合使用在资源释放性语句。 例如：定时器销毁…