angularjs2 组件的生命周期

本文介绍了AngularJS2组件的生命周期,包括ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked和ngOnDestroy等生命周期钩子。这些钩子允许开发者在特定阶段执行回调,方便地处理组件的创建、数据变化和销毁等事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件的生命周期由angular内部管理,从组件的创建、渲染到数据变动,再到dom中移除。这期间每个环节都有angular提供的一系列钩子。通过钩子可以让开发者很方便的在这些事件触发的时候执行响应的回调函数。

生命周期钩子

  • angular会顺序执行以下钩子方法
    • ngOnChanges
    • ngOnInit
    • ngDoCheck
    • ngAfterContentInit
    • ngAfterContentChecked
    • ngAfterViewInit
    • ngAfterViewInit
    • ngAfterViewChecked
    • ngOnDestory
ngOnChanges

angularjs1.x 中需要通过$scope.$watch,然后在每次脏检查中判断是否数据有变化。在angular2中只要在组件中定义ngOnChanges 方法,在输入输出就会自动被调用。
ngOnChanges 当且仅当输入数据变化时才会被调用,即通过@Input()显式指定的输入变量。

ngOnInit

这个钩子主要用于数据绑定输入属性之后初始化组件。该方法会在第一次执行ngOnChanges后被调用

使用ngOnInit的2个情况(《揭秘Angular2》):
+ 组件构造不久后就要进行复杂的初始化
+ 需要输入属性设置完成之后才构建组件

该方法一般都用在初始化组件数据。通过angular cli 创建的组件中,一般会默认自动实现 ngOnInit接口

ngDoCheck

用于检测变化。与ngOnChanges区别在于 ngDoCheck检测的粒度更细。一个组件中不应该同时出现ngOnChanges和ngDoCheck

ngAfterContentInit

在组件使用<ng-content>将外部内容潜入到组件视图后执行,在第一次ngDoCheck后执行,并且只执行一次。

ngAfterContentChecked

在组件使用<ng-content>将外部内容潜入到组件视图后,或它每次发生变化时执行

ngAfterViewInit

在该组件和其所有子组件以及视图创建完成后执行

ngAfterViewChecked

在该组件和其所有子组件以及视图创建完成后执行一次,并且每次子组件变化时执行

ngOnDestory

在销毁指令或组件之前触发。一般在此执行一些不会被垃圾回收器自动回收的资源的销毁工作。

AngularJS生命周期函数包括构造函数、编译、链接、注册监视、模型变化、观察和摧毁。\[1\]\[2\]在构造函数中,除了对局部变量进行初始化外,不应该做其他操作。编译阶段是AngularJS遍历浏览器提供的DOM树,尝试匹配已注册的指令集来处理元素、属性、注释和CSS类。每当匹配一个指令时,AngularJS会调用该指令的编译函数,并收集所有的连接函数。链接阶段是创建作用域,并通过调用每个指令对应的连接函数将指令和作用域连接起来。注册监视阶段是指令在作用域上注册一个监视,用于监测数据的变化。模型变化阶段是当模型发生变化时,执行用户定义的回调函数。AngularJS会调用内置指令$scope.$apply,将操作转移到AngularJS的环境中。观察阶段启动脏检测机制,检测根作用域和所有子作用域上的变化,并执行$watch的回调函数。摧毁阶段是当不再需要一个作用域时,使用$scope.$destroy()方法将其移除。\[2\]在AngularJS中,可以通过在根主键(父组件)中定义方法来处理生命周期函数。\[3\] #### 引用[.reference_title] - *1* *3* [Angular 中的生命周期函数(生命周期钩子)](https://blog.youkuaiyun.com/I_r_o_n_M_a_n/article/details/114988622)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [AngularJs生命周期](https://blog.youkuaiyun.com/yanghang180/article/details/80844499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值