浅谈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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
jQuery实现列表的全选功能
2015/03/18 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2016党员入党决心书
2015/09/22 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python