Angular生命周期函数

Angular 中,组件的生命周期由一系列钩子函数(lifecycle hooks)来控制,这些钩子函数按照特定的顺序在组件的生命周期中被调用。以下是常见的 Angular 组件生命周期函数及其运行顺序:

  1. ngOnChanges: 当组件的输入属性发生变化时,ngOnChanges 钩子函数会被调用。它会在组件初始化之后以及每次输入属性发生变化时执行。

  2. ngOnInit: ngOnChanges之后,ngOnInit钩子函数被调用。它在组件初始化完成后立即执行,用于进行组件的一次性初始化操作。

  3. ngDoCheck: 在每个变更检测周期中,ngDoCheck钩子函数会被调用。它用于检测和响应组件中的任何变化,包括检测到输入属性的变化、检测到子组件变化等。

  4. ngAfterContentInit: 当组件所包含的外部内容投影到组件视图之后,ngAfterContentInit 钩子函数被调用。它表示组件的内容初始化已完成。

  5. ngAfterContentChecked: 在每个变更检测周期中,ngAfterContentChecked 钩子函数会被调用。它在ngAfterContentInit 之后调用,用于执行与内容投影相关的任何后续操作。

  6. ngAfterViewInit: 当组件的视图初始化完成后,ngAfterViewInit 钩子函数被调用。它表示组件的视图已经初始化完成,可以进行 DOM 操作。

  7. ngAfterViewChecked: 在每个变更检测周期中,ngAfterViewChecked钩子函数会被调用。它在ngAfterViewInit 之后调用,用于执行与视图相关的任何后续操作。

  8. ngOnDestroy: 当组件即将被销毁时,ngOnDestroy钩子函数会被调用。它用于进行组件的善后操作,如取消订阅、释放资源等。

需要注意的是,ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked 这些钩子函数会在每个变更检测周期中被调用,而 ngAfterContentInit 和 ngOnDestroy 只会在组件的生命周期中被调用一次。

以上是Angular组件生命周期函数的运行顺序。了解它们的执行顺序有助于在合适的时机执行特定的操作,以确保组件的生命周期正确地处理和管理组件的状态和行为。

相关推荐
majingming1234 小时前
FUNCTION
java·前端·javascript
SuperEugene5 小时前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
子兮曰6 小时前
Bun v1.3.11 官方更新全整理:新增功能、关键修复与升级验证
javascript·node.js·bun
Setsuna_F_Seiei6 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
wefly20177 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
kyriewen118 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年8 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js
~无忧花开~10 小时前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
哈__10 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-maps
javascript·react native·react.js
SuperEugene11 小时前
Axios + Vue 错误处理规范:中后台项目实战,统一捕获系统 / 业务 / 接口异常|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios