浅谈angular2 组件的生命周期钩子


Posted in Javascript onAugust 12, 2017

本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下:

按照生命周期执行的先后顺序,Angular生命周期接口如下所示

名称 时机 接口 范围
ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。 OnChanges 指令和组件
ngOnInit 在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 ) OnInit 指令和组件
ngDoCheck 在每个 Angular 变更检测周期中调用。 DoCheck 指令和组件
ngAfterContentInit 当把内容投影进组件之后调用。 AfterContentInit 组件
ngAfterContentChecked 每次完成被投影组件内容的变更检测之后调用。 AfterContentChecked 组件
ngAfterViewInit 初始化完组件视图及其子视图之后调用。 after initializing the component's views and child views. AfterViewInit 组件
ngAfterViewChecked 每次做完组件视图和子视图的变更检测之后调用。 AfterViewChecked 组件
ngOnDestroy 当 Angular 每次销毁指令 /组件之前调用。 OnDestroy 指令和组件

生命周期顺序简写

在Angular通过构造函数创建组件/指令时,它调用这些生命周期钩子方法的顺序是:

  • ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。
  • ngOnInit:在第一次ngOnChanges之后。
  • ngDoCheck:每次Angular变化检测时。
  • ngAfterContentInit:在外部内容放到组件内之后。
  • ngAfterContentChecked:在放到组件内的外部内容每次检查之后。
  • ngAfterViewInit:在初始化组件视图和子视图之后。
  • ngAfterViewChecked:在妹子组件视图和子视图检查之后。
  • ngOnDestroy:在Angular销毁组件/指令之前。

除此之外,一些组件还提供了自己的生命周期钩子。例如router有routerOnActivate。

浅谈angular2 组件的生命周期钩子

测试生命周期顺序的代码

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: '<ng-content></ng-content>'
})
class Panel {
 // 组件输入属性值发生改变(首次调用一定会发生在 ngOnInit之前。)
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 组件初始化完成(在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 ))
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck钩子不要同时出现,互斥!。本例仅供学习');
 }
 // 脏值检测器被调用后调用
 ngDoCheck() {
  console.log('Do check');
 }
 // 组件销毁之前
 ngOnDestroy() {
  console.log('Destroy');
 }
 // 组件-内容-初始化完成 PS:指的是ContentChild或者Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 // 组件内容脏检查完成
 ngAfterContentChecked() {
  console.log('After content checked');
 }
 // 组件视图初始化完成 PS:指的是ViewChild或者ViewChildren
 ngAfterViewInit() {
  console.log('After view init');
 }
 // 组件视图脏检查完成之后
 ngAfterViewChecked() {
  console.log('After view checked');
 }
}

@Component({
 selector: 'app',
 template: `
  <button (click)="toggle()">Toggle</button>
  <div *ngIf="counter % 2 == 0">
   <panel caption="Sample caption" title="Sample">Hello world!</panel>
  </div>
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

输出结果

浅谈angular2 组件的生命周期钩子

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
You might like
基于mysql的bbs设计(二)
2006/10/09 PHP
深入apache host的配置详解
2013/06/09 PHP
php排序算法实例分析
2016/10/17 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript操作数组详解
2014/12/17 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jquery validate demo 基础
2015/10/29 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
python中文编码问题小结
2014/09/28 Python
Python动态加载模块的3种方法
2014/11/22 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python字符串下标与切片及使用方法
2020/02/13 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
python eventlet绿化和patch原理
2020/11/21 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
会计求职信范文
2014/05/24 职场文书
工作岗位职责范本
2015/02/15 职场文书
初一军训感言
2015/08/01 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android