首页 > 其他分享 >Angular--父子组件生命周期钩子(lifecycle hooks)执行过程

Angular--父子组件生命周期钩子(lifecycle hooks)执行过程

时间:2022-11-13 17:25:04浏览次数:39  
标签:调用 -- hooks Angular 生命周期 钩子 组件 lifecycle

1.angular 组件生命周期钩子执行过程

 组件初始化过程中,生命周期钩子执行顺序:

  1. constructor()构造函数,初始化class,(constructor不属于Angular生命周期钩子的范畴,这里只是说明组件组件初始化会先调用构造函数)。
  2. ngOnChanges()--如果组件没有输入属性(@Input()),或者使用时没有提供任何输入属性,那么angular不会调用它;会调用多次
  3. ngOnInit()--只调用一次,一般用来初始化数据,如请求数据。
  4. ngDoCheck()--紧跟在每次执行变更检测时的ngOnChanges()和首次执行变更检测的ngOnInit()后调用;会调用多次
  5. ngAfterContentInit()--当Angular把外部内容投影进组件视图或指令所在的视图之后调用,第一次ngDoCheck()之后调用,只调用一次。
  6. ngAfterContentChecked()--每当Angular检查完被投影到组件或指令中的内容之后调用,在ngAfterContentInit()和每次ngDoCheck()之后调用,会调用多次
  7. ngAfterViewInit()--当Angular初始化玩玩组件视图及其子视图之后调用,只调用一次。
  8. ngAfterViewChecked()--当Angular做完组件视图和子视图的变更检测之后调用;在ngAfterViewInit()和每次ngAfterContentChecked()之后调用,会调用多次
  9. ngOnDestroy()--当Angular每次销毁组件或指令之前调用并清扫。在这里取消订阅可观察对象和分离事件处理器,以防内存泄漏。

 

2.angular 父子组件生命周期钩子过程

 父子组件生命周期钩子执行顺序,如下图所示  

  1.首先调用父组件的构造函数,然后调用子组件的构造函数。

  2.当调用父组件的ngAfterContentChecked()钩子之后,会调用子组件的生命周期函数。

  3.子组件的ngAfterContentChecked()钩子执行完之后,会在调用子组件的子组件的生命周期钩子(如果有的话)。

  4.子组件执行ngAfterViewChecked()钩子后,父组件继续执行其余的生命周期钩子。

  5.当发生变更检测时,父组件先触发ngDoCheck() => ngAfterContentChecked(),然后子组件触发 ngOnChanges() => ngDoCheck() => ngAfterContentChecked() => ngAfterViewChecked(),最后父组件调用ngAfterViewChecked()。

 

标签:调用,--,hooks,Angular,生命周期,钩子,组件,lifecycle
From: https://www.cnblogs.com/sparkler/p/16864656.html

相关文章

  • SVM 超平面计算例题
    SVMSummaryExampleSupposethedatasetcontainstwopositivesamples\(x^{(1)}=[1,1]^T\)and\(x^{(2)}=[2,2]^T\),andtwonegativesamples\(x^{(3)}=[0,0]^T\)......
  • SpringBoot 自定义注解,轻松实现 Redis 分布式锁
    1.自定义注解类@Documented@Retention(RetentionPolicy.RUNTIME)@Target(ElementType.METHOD)public@interfaceReqFastLimit{//rediskeyStringkey()d......
  • 获取元素位置三大系列总结(offset、client、scroll)
    获取元素位置三大系列总结(offset、client、scroll)三大系列大小对比作用element.offsetWidth返回自身包括padding、边框、内容区的宽度,返回数值不带单位el......
  • (Python)简易通讯录
    问题描述:将用户输入用逗号分隔的一系列人名作为键,用户输入的逗号分隔的手机号作为值,创建字典MyDict,输入一个正整数n,你将被要求读入n个输入(输入形式如下所示),每得到一......
  • PC端网页特效-元素滚动scroll系列
    PC端网页特效-元素滚动scroll系列1.scroll元素系列属性scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。scroll系列......
  • 实验三:朴素贝叶斯算法实验
    实验三:朴素贝叶斯算法实验班级:20大数据(3)班学号:201613341【实验目的】理解朴素贝叶斯算法原理,掌握朴素贝叶斯算法框架。【实验内容】针对下表中的数据,编写python程......
  • 关于vscode开发ue4新建工程后报错”无法使用 compilerPath“xxx”解析配置。 请改用“
    原因:compilerPath中的cl.exe路径含有空格例如我这里因此只能解析出空格之前的路径,进而报错解决方法:将compileCommands.json文件中cl.exe路径用"(转义的引号)包起来即......
  • PHP 网页
    PHP官网下载 https://windows.php.net/download/在PHP官网点击Download下载时不管选择哪个版本的都有两个类型:NonThreadSafe(非线程安全)和  ThreadSafe(线程安全)......
  • 不一样的纯H5C3动画爱心
    最近抖音很火的让你会计算机的朋友给你做个爱心突然火了,我也不出意外的收到了朋友的邀请,自己做肯定太麻烦了于是乎百度第一步,惊呆了!网上全都是一个爱心,变着法的火焰爱......
  • 32. vue框架的理解
    vue是创建用户界面的框架,是创建SPA应用的框架,采用了MVVM模型,是数据驱动视图;使用了业务逻辑和页面解构分离的开发思想;使用高效的diff算法渲染列表;使用组件化开发,提高代......