概述

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. Matlab使用技巧

    (1) Matlab强制退出正在运行的程序A: Ctrl + C(2)如何让Matlab跑完程序后自动关机?A: 在程序的末尾加上一条代码:    system('shutdown -s')   当然 ...

  2. mysql试题

    drop,delete与truncate的区别:优先级: drop > truncate > deleteTRUNCATE 按行删除并不把删除操作记录记入日志保存(不可恢复)DELETE ...

  3. 使用SatelliteMenu创建动画菜单

    一.GitHub地址:https://github.com/chenshouyin/SatelliteMenu 二.使用步骤: 第一步:在Android Studio中创建一个项目,然后在Androi ...

  4. 4《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—目录

    我们已经学习过许多处理文件的Unix工具,现在是时候来学习目录了,也就是文件夹(图20).正如我们所见,许多在文件中的开发思想也适用于目录,但同样也有许多区别.

  5. 阿里巴巴Java开发规约插件p3c详细教程及使用感受 - 转

    http://www.cnblogs.com/han-1034683568/p/7682594.html

  6. [Oracle]如何查看 10046 trace 中的 tim= ... 的具体时刻

    可以在  Linux 下,用下列方式: 如10046 trace 文件中如果有如下的内容:... tim = 1503032923 可以用 date 命令加 option 来看它的时刻: date - ...

  7. 用JS制作一个信息管理平台(1)

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  8. Jmeter(三十一)_数据驱动,业务关联

    这种数据驱动的本质是:将测试的case,参数,url,预期结果,存储于本地excel中.运行脚本时,从文件中获取预期结果,将实际结果与预期结果比较,将实际结果,比较结果,响应状态码回写excel. 一 ...

  9. 做完小程序项目、老板给我加了5k薪资~

    大家好,我是苏南,今天要给大家分享的是最近公司做的一个小程序项目,过程中的一些好的总结和遇到的坑,希望能给其他攻城狮带来些许便利,更希望能做完之后老板给你加薪- 今天是中秋节的第一天,假日的清晨莫名的 ...

  10. Linux下针对服务器网卡流量和磁盘的监控脚本

    1)实时监控网卡流量的通用脚本: [root@ceph-node1 ~]# cat /root/net_monit.sh #!/bin/bash PATH=/bin:/usr/bin:/sbin:/u ...