概述

angular的组件及指令都有相应的声明周期: 创建, 更新, 销毁, 我们可以通过实现相应的生命周期钩子接口来进入相应的该声明周期的关键时刻

组件生命周期顺序

    • ngOnChanges: 当组件数据绑定的输入属性发生变化时触发, 该方法接受一个SimpleChanges对象,包括当前值和上一属性值.首次调用一定发生在ngOnInit前,注意的是该方法仅限于对象的引用发生变化时,也就是说,如果对象的某个属性发生变化,Angular是不会触发onChanges的.
    • ngOninit:初始化指令或组件, 在angular第一次展示组件的绑定属性后调用,该方法只调用一次.
    • ngDocheck: 检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。
      在每个Angular变更检测周期中调用,ngOnChanges()ngOnInit()之后。

      • ngAfterContentInit: 当把内容投影进组件之后调用。
        第一次ngDoCheck()之后调用,只调用一次. 只适用于组件。
      • ngAfterContentChecked: 每次完成被投影组件内容的变更检测之后调用。
        ngAfterContentInit()和每次ngDoCheck()之后调用,只适合组件。
      • ngAfterViewInit: 在angular初始化组件及其子组件的视图之后调用, 只调用一次,第一次
        ngAfterContentChecked()之后调用.只适合组件。
      • ngAfterViewChecked: 每次做完组件视图和子视图的变更检测之后调用。
        ngAfterViewInit()和每次ngAfterContentChecked()之后调用。只适合组件。
    • ngOnDestory: 在angular每次销毁组件或指令之前调用, 通常用于移除事件监听,退订可观察对象等.                    原文直通车

angular生命周期的更多相关文章

  1. angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别

    angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks  文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...

  2. angularjs link compile与controller的区别详解,了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  3. Angular生命周期理解

    Angular每个组件,包含根组件和每一级的子组件,都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 在An ...

  4. angular、angular2、vue的生命周期

    angular生命周期是什么 1.Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握 ...

  5. Angular2 组件生命周期

    1. 说明 Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 2. 接口 按照生命周期 ...

  6. Angular 个人深究(四)【生命周期钩子】

    Angular 个人深究(四)[生命周期钩子] 定义: 每个组件都有一个被 Angular 管理的生命周期. Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并 ...

  7. angular的生命周期

    什么是生命周期 生命周期函数通俗的讲就是组件创建.组件更新.组件销毁的时候会触发的一系列的方法. 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子 ...

  8. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  9. Angular组件生命周期——生命周期钩子

    生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...

随机推荐

  1. QT 12 QTimage转换Mat

    QImage cvMat2QImage(const cv::Mat& mat) { // 8-bits unsigned, NO. OF CHANNELS = 1 if(mat.type() ...

  2. 对Promise的理解?

    ES6原生提供了promise对象 所谓Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通过是一个异步操作),并且这个事件提供统一的API,可供进一步处理 P ...

  3. JS进阶之---函数,立即执行函数

    一.函数 函数声明.函数表达式.匿名函数 函数声明:使用function关键字声明一个函数,再指定一个函数名,叫函数声明.function name () { … } 函数表达式:使用function ...

  4. 高性能mysql之慎用BLOB与TEXT

    文章转自 https://blog.csdn.net/john1337/article/details/70919212 BLOB与TEXT是为了存储极大的字符串而设计的数据类型,采用二进制与字符串方 ...

  5. BSGS-Junior·大步小步算法

    本文原载于:http://www.orchidany.cf/2019/02/06/BSGS-junior/#more \(\rm{0x01}\) \(\mathcal{Preface}\) \(\rm ...

  6. not annotated with HTTP method type (ex. GET, POST) 问题解决

    大多数情况是真的而没有写method = RequestMethod.GET.POST等注解, 有时这么写了也报类似异常,如下 @FeignClient("microservice-prov ...

  7. helm 部署 使用 记录

    0.概念:Helm作为一个包管理工具, 它把Kubernetes资源(比如deployments.services或 ingress等) 打包到一个chart中,方便我们将其chart保存到chart ...

  8. java 变量及数据类型、原码、反码、补码

    Java基础——变量及数据类型 变量的概念 内存中的一个存储区域 变量名+数据类型 可在同一类型范围内不断变化 为什么定义变量: 用于不断的存放同一类型的常量,并可以重复使用 使用变量注意: 变量的作 ...

  9. IO复用\阻塞IO\非阻塞IO\同步IO\异步IO

    转载:IO复用\阻塞IO\非阻塞IO\同步IO\异步IO 一. 什么是IO复用? 它是内核提供的一种同时监控多个文件描述符状态改变的一种能力:例如当进程需要操作多个IO相关描述符时(例如服务器程序要同 ...

  10. Notepad++中的颜色属性设置大全

    Indent guideline style  缩进参考线的颜色Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{}   js中的())Bad brace col ...