一、 Angular中的生命周期函数

官方文档:https://www.angular.cn/guide/lifecycle-hooks 生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。

当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。

constructor

构造函数中除了使用简单的值对局部变量进行初始化 之外,什么都不应该做。 (非生命周期函数)

ngOnChanges()

当 Angular(重新)设置数据绑定输入属性时响应。该 方法接受当前和上一属性值的 SimpleChanges 对象 当被绑定的输入属性的值发生变化时调用,首次调用一 定会发生在 ngOnInit() 之前。

ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输 入属性之后,初始化指令/组件。
在第一轮 ngOnChanges() 完成之后调用,只调用一次。

使用 ngOnInit() 有两个原因:
1、在构造函数之后马上执行复杂的初始化逻辑
2、在 Angular 设置完输入属性之后,对该组件进行准

 
备。
有经验的开发者会认同组件的构建应该很便宜和安全。

ngDoCheck()

检测,并在发生 Angular 无法或不愿意自己检测的变 化时作出反应。在每个 Angular 变更检测周期中调用, ngOnChanges() 和 ngOnInit() 之后。

ngAfterContentInit()

当把内容投影进组件之后调用。第一次 ngDoCheck() 之 后调用,只调用一次。

ngAfterContentChecked()

每次完成被投影组件内容的变更检测之后调用。 ngAfterContentInit() 和每次 ngDoCheck() 之后调用。

ngAfterViewInit()

初始化完组件视图及其子视图之后调用。第一 次 ngAfterContentChecked() 之后调用,只调用一次。

ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit()和每次 ngAfterContentChecked() 之后 调用。

ngOnDestroy()

当 Angular 每次销毁指令/组件之前调用并清扫。在这 儿反订阅可观察对象和分离事件处理器,以防内存泄 漏。
在 Angular 销毁指令/组件之前调用。

Angular 中的生命周期函数的更多相关文章

  1. ionic中的生命周期函数

    //ionic中的生命周期函数 onPageLoaded(){ //page初始化时 console.log("page 1 : page loaded"); } //在这里可以做 ...

  2. Unity3D中的生命周期函数

    生命周期函数:需要继承 MonoBehaviour 类才能使用.生命周期函数全部都是由系统定义好的,系统会自动调用,且调用顺序和我们在代码里面的书写顺序无关. 常用的生命周期函数: Awake():唤 ...

  3. React中的生命周期函数

    React的生命周期函数 什么是生命周期函数:生命周期函数是指在某一个时刻组件会自动调用执行的函数 Initialization:初始化 执行Constructor,初始state和props Mou ...

  4. flutter中的生命周期函数

    前言:生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情,flutter中的State生命周期和android以及React Native的生命周期类似. 先看一张 ...

  5. ionic生命周期函数

    Ionic4中的生命周期函数和angualr7基本是一样的,下面我们看看Ionic4中的生命周期函数,以及生命周期函数的用法. Ionic4中内置的生命周期函数: ionViewWillEnter — ...

  6. React的生命周期函数

    概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6 ...

  7. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  8. Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

    <app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...

  9. Activity系列讲解---三大基本状态与七大生命周期函数

    简介:四大组件之一,在应用中一个Activity可以用来表示一个界面,可以理解为用户可视化界面,一个android应用必须通过Activity来运行和启动. 1.三大基本状态与七大生命周期函数 2.代 ...

随机推荐

  1. linux 的GUNB修复问题

    1.意外断电,kali linux 虚拟机没有正常关机的时候 , 突然断电之后重启电脑之后,kali linux 直接黑屏了无法进入系统.如下面的界面 光标一直在闪烁. 这里可以使用 快捷键 同时按住 ...

  2. 详解Linux磁盘管理与文件系统

    磁盘基础 硬盘结构 物理结构 盘片:硬盘有多个盘片,每盘片 2 面. 磁头:每面一个磁头. 数据结构 扇区:磁盘上的每个磁道被等分为若干个弧段,这些弧段便是硬盘的扇区. 硬盘的第一个扇区,叫做引导扇区 ...

  3. microsoft office 2007 在已经安装pdf maker的情况下另存为没有adobe pdf选项

    通常,此类情况是pdf maker 插件被禁用导致,点击office 2007左上角菜单栏,选项,加载项,在管理处选择禁用项目, 找到acrobat pdf maker office com addi ...

  4. linux网络编程之socket编程(十)

    今天继续socket编程的学习,最近晚上睡觉都没有发热,没有暖气的日子还是种煎熬,快乐的十一也已经走来,幸福有暖气的日子也快啦,好了,回到正题~ ①close终止了数据传送的两个方向. ②shutdo ...

  5. 《AlwaysRun!》第五次作业:项目需求分析改进与系统设计

     项目 内容 这个作业属于哪个课程 2016级软件工程(西北师范大学) 这个作业的要求在哪里 实验九 团队作业5—团队项目需求改进与系统设计 团队名称 Always Run! 作业学习目标 (1)掌握 ...

  6. h5格式化微信 nickname 保留第一个字,其余用*显示

    截取微信nickname中需要注意的是,表情符号和特殊字符,如果你不用正则过滤掉的话,使用slice(0,1)直接截取第一个字符串是不行的,因为表情符号占用两个字节,截取一半,ios会报错,andro ...

  7. re模块与正则

    一.正则 正则就是用来筛选字符串中的特定的内容 正则表达式与re模块的关系: 1.正则表达式是一门独立的技术,任何语言都可以使用 2.python中药想使用正则表达式需要通过调用re模块 正则应用场景 ...

  8. javaWeb上传

    上传(上传不能使用BaseServlet) 1. 上传对表单限制  * method="post"  * enctype="multipart/form-data&quo ...

  9. HashMap,HashTable,ConcurrentHashMap的实现原理及区别

    http://youzhixueyuan.com/concurrenthashmap.html 一.哈希表 哈希表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即 ...

  10. BZOJ 1576 树剖+LCT

    题意:给定一张图,保证 $1$ 号点到其他所有点的最短路径是唯一的,求:对于点 $i$,不经过 $1$ 到 $i$ 最短路径上最后一条边的最短路. 题解:可以先建出最短路树,然后枚举每一条非树边. 对 ...