0

0

浅谈Angular中组件的生命周期

青灯夜游

青灯夜游

发布时间:2021-06-16 10:18:34

|

2861人浏览过

|

来源于csdn

转载

本篇文章给大家介绍一下angular中组件的生命周期(component lifecycle hook)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

浅谈Angular中组件的生命周期

环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: Visual Studio Code

1. 摘要

当 Angular 实例化组件类并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angular 会检查数据绑定属性何时发生变化,并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时,生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时,指令就有了类似的生命周期。【相关教程推荐:《angular教程》】

你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件,以初始化新实例,需要时启动变更检测,在变更检测过程中响应更新,并在删除实例之前进行清理。

2. 生命周期及顺序

  • ngOnChanges(): 当 Angular 设置或重新设置数据绑定的输入属性时响应。

  • ngOnInit(): 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。

  • ngDoCheck(): 每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。

  • ngAfterContentInit(): 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。

  • ngAfterContentChecked(): ngAfterContentInit() 和每次 ngDoCheck() 之后调用

  • ngAfterViewInit(): 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。

  • ngAfterViewChecked(): ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

  • ngOnDestroy(): 每当 Angular 每次销毁指令/组件之前调用,清理释放资源。

3. 响应生命周期事件

我们以通过实现一个或多个 Angular中定义的生命周期钩子接口来响应组件或指令生命周期中的事件。每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上 ng 前缀构成的。例如:

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

说明:

1) 通过生命周期钩子接口来响应生命周期中的事件,需要在类名之后,声明实现(implements) 具体的钩子接口。然后代码中定义个钩子函数才能被执行。如 ngOnInit() 对应 接口OnInit

2) 可以实现多个钩子接口,例如 export class DemoComponent implements OnInit, OnDestroy {

4. 主要生命周期事件

4.1. 初始化事件 ngOnInit()

Android开发指南中文pdf版
Android开发指南中文pdf版

Android开发指南中文pdf版,学习android的朋友可以参考下。应用程序基础Application Fundamentals 关键类 应用程序组件 激活组件:intent 关闭组件 manifest文件 Intent过滤器 Activity和任务 Affinity(吸引力)和新任务 加载模式 清理堆栈 启动任务 进程和线程 进程 线程 远程过程调用 线程安全方法 组件生命周期 Activity生命周期 调用父类 服务生命周期 广播接收器生命周期 进程与生命周期 用户界面User Interface

下载

使用 ngOnInit() 方法执行以下初始化任务:

  • 逻辑稍复杂,不适合放到构造函数中的逻辑

  • 初始化中的数据访问逻辑

  • 处理需要根据父组件传入参数(@Input)进行初始化的逻辑

4.2. 实例销毁 ngOnDestroy()

把清理逻辑放进 ngOnDestroy() 中,这个逻辑就必然会在 Angular 销毁该指令之前运行。下列逻辑可言放到ngOnDestroy():

  • 取消订阅可观察对象和 DOM 事件。

  • 停止 interval 计时器。

  • 反注册该指令在全局或应用服务中注册过的所有回调。

  • 释放其他占有的资源。

5. 总结

  • 使用生命周期事件钩子函数,别忘了类名后面implements 相应的接口,否则不生效;

  • 初始化代码,区分哪些放构造函数,哪些放 ngOnInit();

  • 可以精简的钩子事件方法来避免性能问题;

  • ngOnChanges()发生的非常频繁,加入复杂逻辑会影响性能;

更多编程相关知识,请访问:编程入门!!

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1018

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

63

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

406

2025.12.29

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

465

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

12

2025.12.06

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

2975

2024.08.14

点击input框没有光标怎么办
点击input框没有光标怎么办

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

180

2023.11.24

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

4

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

23

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js:纪录片
Vue.js:纪录片

共1课时 | 0.2万人学习

Angular js入门篇
Angular js入门篇

共17课时 | 3.5万人学习

Git 教程
Git 教程

共21课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号