Angular4学习笔记(九)- 生命周期钩子简介
简介
Angular 指令的生命周期,它是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作。Angular 中所有的钩子如下图所示:
分类
- 指令与组件共有的钩子
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
- 组件特有的钩子
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked
调用顺序
- ngOnChanges - 当数据绑定输入属性的值发生变化时调用
- ngOnInit - 在第一次 ngOnChanges 后调用
- ngDoCheck - 自定义的方法,用于检测和处理值的改变
- ngAfterContentInit - 在组件内容初始化之后调用
- ngAfterContentChecked - 组件每次检查内容时调用
- ngAfterViewInit - 组件相应的视图初始化之后调用
- ngAfterViewChecked - 组件每次检查视图时调用
- ngOnDestroy - 指令销毁前调用
如何实现
要实现生命周期钩子,只需实现对应的接口即可,如实现ngOnChanges
钩子只需实现OnChanges
接口即可:
export class XxxComponent implements
OnInit, OnChanges,
DoCheck, AfterContentInit,
AfterContentChecked, AfterViewChecked,
AfterViewInit, OnDestroy {
// balabalabala...
}
ngOnChanges
触发条件
OnChanges只对输入的不可变对象起作用。
输入属性以前说过,使用@Input
装饰的属性,这里还需要注意不可变对象,在Angular中,典型的不可变对象是string
类型,但所有自定义对象均为可变对象,如:user:{name:string}
,可变对象即使被定义为输入属性,也不会触发OnChanges
方法。
ngOnChanges方法参数
ngOnChanges方法有一个SimpleChanges
类型的参数,它其实是一个类型为SimpleChange
,并且键值为属性名的数组:
export interface SimpleChanges { [propName: string]: SimpleChange; }
而SimpleChange
的结构如下:
export declare class SimpleChange {
previousValue: any;
currentValue: any;
firstChange: boolean;
constructor(previousValue: any, currentValue: any, firstChange: boolean);
/**
* Check whether the new value is the first value assigned.
*/
isFirstChange(): boolean;
}
假如我们的组件中有一个满足触发OnChanges
钩子条件的属性名叫inputVal
,那么可以通过如下方式获取它变化前后的值:
ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges中inputVal变更前值为:'+ changes['inputVal'].previousValue);
console.log('ngOnChanges中inputVal变更后值为:'+ changes['inputVal'].currentValue);
}
ngOnInit
在第一次 ngOnChanges 执行之后调用,并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。
ngDoCheck
当组件的输入属性发生变化时,将会触发 ngDoCheck 方法。我们可以使用该方法,自定义我们的检测逻辑。
特别注意,使用时要比较精准的定义检查位置,否则会造成性能问题,因为任何变化,比如鼠标的点击事件或键盘的输入事件都会触发ngDoCheck
。
ngAfterContentInit
在组件使用 ng-content 指令的情况下,Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
ngAfterContentChecked
在组件使用 ng-content 指令的情况下,Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
ngAfterViewInit
在组件相应的视图初始化之后调用,它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
ngAfterViewChecked
组件每次检查视图时调用
ngOnDestroy
在指令被销毁前,将会调用 ngOnDestory 方法。它主要用于执行一些清理操作,比如:移除事件监听、清除定时器、退订 Observable 等。
Angular4学习笔记(九)- 生命周期钩子简介的更多相关文章
- Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- AngularJs学习笔记-组件生命周期
组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...
- vue学习(十九) 生命周期 了解
生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...
- Java Web学习笔记-Servle生命周期
Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...
- android学习笔记 activity生命周期&任务栈&activity启动模式
activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...
- iOS学习笔记—ViewController/生命周期
ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...
- MVC学习笔记---MVC生命周期
Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...
随机推荐
- Python3.x使用PyMysql连接MySQL数据库
Python3.x使用PyMysql连接MySQL数据库 由于Python3.x不向前兼容,导致Python2.x中的很多库在Python3.x中无法使用,例如Mysqldb,我前几天写了一篇博客Py ...
- [BZOJ3674]可持久化并查集加强版&[BZOJ3673]可持久化并查集 by zky
思路: 用主席树维护并查集森林,每次连接时新增结点. 似乎并不需要启发式合并,我随随便便写了一个就跑到了3674第一页?3673是这题的弱化版,本来写个暴力就能过,现在借用加强版的代码(去掉异或),直 ...
- node+koa2获取请求参数
1.get方式: http://localhost:3000/?user=000001&body=0002&age=26 const router = require('koa-rou ...
- C++ operator重载运算符和隐式转换功能的实现
C++ operator重载运算符和隐式转换功能的实现: #include <iostream> using namespace std; class OperatorTest { pub ...
- IO流(1)—之序列化与反序列化
1.概念 序列化:把Java对象转换为字节序列的过程称为对象的序列化 反序列化:把字节序列恢复为Java对象的过程称为对象的反序列化 注:只有实现了Serializable和Externalizabl ...
- 10款免费开源PHP框架
NO.1 Laravel - 巨匠级PHP开发框架 现在最流行的一款PHP框架,功能强大,学习和使用也非常简单方便,即使你是PHP新手,也不用担心入门问题. NO.2 Phalcon - 最快的PHP ...
- iphone程序适配ipad可以用下面的宏进行尺寸改写
//判断是否为iPad #define ISIPAD [[[UIDevice currentDevice].model substringToIndex:4] isEqualToString:@&qu ...
- shell自动补全功能:bash和zsh
首要一点:shell有多种,比如bash.zsh.csh.ksh.sh.tcsh等 因此,制作自动补全功能时,要先搞清楚,你使用的是哪种shell,各个shell制作方法是不同的,网上大部分介绍的是关 ...
- 微信小程序无法获取UnionId的情况及处理
问题背景:做了微信小程序,一切都还正常,但是最后体验版放出去时,却发现很多用户无法绑定用户,后台返回:参数非法.经过多方排查,发现是微信拿到的code请求返回的数据里没有UnionId,也就是接口返回 ...
- one or more multiply defined symbols found
在一个c++的.h文件中加入了这段代码: #include <string> using namespace std; std::string escapeStr(const std::s ...