概述

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. sparse 稀疏函数的用法2

    sparse函数 功能:Create sparse matrix-创建稀疏矩阵 用法1:S=sparse(X)——将矩阵X转化为稀疏矩阵的形式,即矩阵X中任何零元素去除,非零元素及其下标(索引)组成矩 ...

  2. jenkins执行远程脚本注意的问题

    1构建任务 ->新建任务 2.填写任务名称    第二次构建可以复制第一次的配置 3.选择任务名称上面右键  选择配置 4.如下图所示 附录脚本内容 test.sh#!/bin/bash JAR ...

  3. Objective-C 基于Aspects

    JavaScriptCore没有禁,因为各种小程序都在用 网络下载文件没有禁

  4. ubuntu14.04终端分屏terminator的安装使用与配置

    安装 terminator 软件 . sudo apt-get install terminator 这个终端程序可以分屏,常用操作快捷键如下: Ctrl+Shift+O Split terminal ...

  5. Zephyr的Time、Timer、sleep

    正如Linux下一样,关于时间的系统函数可以分为三类:时间值.睡眠一段时间以及延迟执行. 在Zephyr上对应是什么样子呢?带着这个疑问,去了解一下这些函数. 以及他们与suspend之间的关系? 是 ...

  6. c# 获取文件本身的哈希值

    1. 哈希值是什么 我个人认为,哈希值是一个统称,也就是经过加密算法后得出的长度较短.位数固定的输出序列即散列值,这个哈希值是一个凭证,一个数字签名之类的,唯一对应你加密之前的东西,这都是我自个儿觉得 ...

  7. 使用Hexo+Github搭建属于自己的博客(基础)

    前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...

  8. 宇宙最强IDE,查看设计器报错,看不了设计界面

    在使用自定义控件或者用户控件的时候,查看设计器打不开界面的原因: Loaded事件中加以下判断条件:if (!DesignerProperties.GetIsInDesignMode(this))

  9. Android环境准备

    Android环境准备: 1.安装Java环境(自行安装) 2.下载Android SDK包 3.配置系统环境变量 新建ANDROID_HOME 变量值:SDK安装路径(如:D:\android-sd ...

  10. 牛客训练赛25-A-因数个数

    题目链接https://www.nowcoder.com/acm/contest/158/A 无语...这题很迷啊,原谅我的菜,刚开始想用预处理欧拉筛和前缀和,可是这题太血崩了,这样一样要遍历,1-e ...