【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409
前言

  Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体现。

内容

一、什么是钩子

  1.背景:Angular有变更检测机制
  2.执行时间:在生命周期的事件上执行

二、生命周期三个阶段

  组件生命周期三个阶段:初始化—变更检测—销毁阶段

初始化: 看见组件
变更检测:确保组件的属性与页面保持同步,路由操作可以使属性从DOM树上移除
销毁:进行销毁

三、九种钩子方法

  1.红色方法 调用一次 ;绿色方法 被多次调用
这里写图片描述
  2.具体使用条件

适用于指令和组件
ngOnInit:当Angular初始化完成数据绑定的输入属性后,用来初始化指令或者组件。
ngOnChanges:当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。
ngDoCheck:用来检测所有变化(无论是Angular本身能检测还是无法检测的),并作出相应行动。在每次执行“变更检测”
时被调用。
ngOnDestory:在Angular销毁指令或组件之前做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。
只适用于组件
ngAfterContentInit:当Angular把外来内容投影进自己的视图之后调用。
ngAfterContentChecked:当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。
ngAfterViewInit:在Angular创建完组件的视图后调用。
ngAfterViewChecked:在Angular检查完组件视图中的绑定后调用。

  3.项目中使用方式
  OnInit是一个接口 ,@angular/core
  每个接口,都有对应的钩子方法 ngOnInit (接口前面加上ng)

这里写图片描述

小结

  Angular钩子方法,使用过程中,可以实现组件之间的通讯,通过钩子方法,可以在满足一定条件的情况下,激发某个事件,执行一个特定的行为。

感谢您的阅读!

猜你喜欢

转载自blog.csdn.net/m18633778874/article/details/82259409