概述

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. 报表嵌入到.net系统页面

    目录: 1. 问题描述 2. 情形一:报表整体嵌入在.net系统框架中 3. 情形二:报表嵌入.net系统的某个页面中 4.权限控制方式 5.嵌入问题解决 1. 问题描述编辑 报表部署到Web应用服务 ...

  2. CentOS6.9 安装Oracle 11G 版本11.2.0.1.0

    安装实例与数据库 CentOS6.9 安装Oracle 11G 版本11.2.0.1.0 一.检查系统类别. 查看 系统的类别,这里是 64位系统:[root@localhost ~]# uname ...

  3. leetcode 206. Reverse Linked List(剑指offer16)、

    206. Reverse Linked List 之前在牛客上的写法: 错误代码: class Solution { public: ListNode* ReverseList(ListNode* p ...

  4. ubuntu16.04设置tomcat自启动

    我的tomcat名字叫tomcat8_product 1.拷贝catalina.sh到/etc/init.d/目录下 cd tomcat8_product/bin/catalina.sh /etc/i ...

  5. 使用eclipse阅读java源码

    很多时候想要阅读java源代码(无论是jdk自带的,还在第三方的),但是我们使用的jar包都是编译好的class包,无法在eclipse中直接打开,此时需要下载源码包. 本文以查看HttpClient ...

  6. scp传输文件的命令

    scp传输文件的命令 一:scp常规的使用方式: scp可以进行简单的远程复制文件的功能.它是一个在各个主机之间进行复制或文件传输的一个命令工具.它使用一种同ssh一样的安全机制来进行文件的传输. 注 ...

  7. Java的运算符--与(&)、非(~)、或(|)、异或(^)详解

    一.计算机中存储的都是补码 java也是如此: System.out.println(Integer.toBinaryString(2)); System.out.println(Integer.to ...

  8. Matplotlib 简单图例

    图例参考:http://matplotlib.org/gallery.html API参考:http://matplotlib.org/api/pyplot_summary.html # -*- co ...

  9. 最近找工作,有招JAVA开发的可以联系我,如果不嫌弃我2年前用C,也可以联系我

    java涉及到的技术工具:HSF.Pandora.Notify.Metaq.Diamond.Tddl.ScheduleX.精卫.Switch.BCP.Tair.Hbase.Mysql.Ads.Tlog ...

  10. Luogu3514 POI2011 Lollipop 递推、构造

    题目传送门:https://www.luogu.org/problemnew/show/P3514 题意:给出一个只有$1$和$2$的长度为$N$的数列,$M$次询问是否存在一段连续子区间和为$K$. ...