在Angular中组件的生命周期钩子有哪些?

在Angular中,组件的生命周期钩子主要包括以下几个:

  1. ngOnChanges():当Angular(再次)检测到数据绑定输入属性的值发生变化时调用。该方法接收一个SimpleChanges对象,其中包含当前和上一个属性值的详细信息。需要注意的是,ngOnChanges() 仅在每个输入属性的值发生变化时调用,而不会在首次接收到输入属性值时分发。如果你需要在Angular首次设置输入属性值后执行某项操作,请使用ngOnInit() 生命周期钩子。
  2. ngOnInit():在Angular第一次显示数据绑定和首次调用ngOnChanges()之后,初始化指令/组件。这是使用指令和组件时最常见的钩子。在大多数情况下,用于在组件初始化阶段执行如启动定时器,发送HTTP请求等复杂的业务逻辑。
  3. ngDoCheck():Angular每次检测到数据绑定输入属性的值可能发生变化时调用。在此方法中执行自定义变更检测逻辑。实际上,Angular会在每个检测周期中调用它,紧跟在ngOnChanges()和首次执行ngOnInit()后面。
  4. ngAfterContentInit():当Angular把外部内容投影进组件视图或指令所在的视图之后调用。第一次ngDoCheck()之后调用,且只调用一次。
  5. ngAfterContentChecked():每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit()和每次ngDoCheck()之后调用。
  6. ngAfterViewInit():当Angular初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次ngAfterContentChecked()之后调用,且只调用一次。此时,组件的DOM已经构建完成,可以执行一些依赖于DOM的操作,如通过ViewChild查询元素等。
  7. ngAfterViewChecked():每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
  8. ngOnDestroy():当Angular每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄露。在大多数情况下,用于执行清理操作,如取消订阅服务、清除定时器等。

这些生命周期钩子可以帮助你更好地管理和控制组件在创建、更新和销毁过程中的行为。

posted @   王铁柱6  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示