详解Angular 中 ngOnInit 和 constructor 使用场景


Posted in Javascript onJune 22, 2017

1. constructor

constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作。当包含constructor的类被实例化时,构造函数将被调用。

来看例子:

class AppComponent {
  public name: string;
  constructor(name) {
    console.log('Constructor initialization');
    this.name = name;
  }
}

let appCmp = new AppComponent('AppCmp');  // 这时候构造函数将被调用。
console.log(appCmp.name);

转成ES5代码如下:

var AppComponent = (function () {
  function AppComponent(name) {
    console.log('Constructor initialization');
    this.name = name;
  }
  return AppComponent;  // 这里直接返回一个实例
}());
var appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);

2. ngOnInit

ngOnInitAngularOnInit钩子的实现。用来初始化组件。

Angular中生命周期钩子的调用顺序如下:

  1. ngOnChanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。
  2. ngOnInit() -- 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngOnChanges()完成之后调用,只调用一次。
  3. ngDoCheck -- 自定义的方法,用于检测和处理值的改变。
  4. ngAfterContentInit -- 在组件内容初始化之后调用,只适用于组件
  5. ngAfterContentChecked -- 组件每次检查内容时调用,只适用于组件
  6. ngAfterViewInit -- 组件相应的视图初始化之后调用,只适用于组件
  7. ngAfterViewChecked -- 组件每次检查视图时调用,只适用于组件
  8. ngOnDestroy -- 当Angular每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。

在Angular销毁指令/组件之前调用。

了解了这些之后我们来看一个例子:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
 `,
})
export class AppComponent implements OnInit {

 constructor() {
  console.log('Constructor initialization');
 }

 ngOnInit() {
  console.log('ngOnInit hook has been called');
 }
}

这里输出的是:

Constructor initialization
ngOnInit hook has been called

可以看出,constructor的执行是在先的。

那么既然ngOnchanges是输入属性值变化的时候调用,并且ngOnInit是在ngOnchanges执行完之后才调用,而constructor是在组件就实例化的时候就已经调用了,这也就是说,在constructor中我们是取不到输入属性的值的。
所以还是看例子:

// parent.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'exe-parent',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{name}}</p>
  <exe-child [pname]="name"></exe-child>  <!-- 绑定到子组件的属性 -->
 `,
})
export class ParentComponent {
 name: string;

 constructor() {
  this.name = 'God eyes';
 }
}
// child.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'exe-child',
  template: `
   <p>父组件的名称:{{pname}} </p>
  `
})
export class ChildComponent implements OnInit {
  @Input()
  pname: string; // 父组件的输入属性

  constructor() {
    console.log('ChildComponent constructor', this.pname); // this.name=undefined
  }

  ngOnInit() {
    console.log('ChildComponent ngOnInit', this.pname); // this.name=God eyes
  }
}

一目了然。

3. 应用场景

看完的上面的部分可以发现,在constructor中不适合进行任何与组件通信类似的复杂操作,一般在constructor中值进行一些简单的初始化工作:依赖注入,变量初始化等。

那么用到组件间通信的方法我们可以放在ngOnInit中去执行,比如异步请求等:

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{name}}</p>
 `,
})
export class AppComponent implements OnInt {
 name: string = '';

 constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
  this.name = 'WXY';          // 执行初始化操作
 }

 ngOnInit() {
  this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']);
 }
}

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

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
详解Vue 2.0封装axios笔记
Jun 22 #Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 #Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
vue 请求后台数据的实例代码
Jun 22 #Javascript
深入理解vue.js中的v-if和v-show
Jun 22 #Javascript
vue如何从接口请求数据
Jun 22 #Javascript
You might like
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python根据文件大小打log日志
2014/10/09 Python
Python返回数组/List长度的实例
2018/06/23 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
python实现Virginia无密钥解密
2019/03/20 Python
python操作cfg配置文件方式
2019/12/22 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
火车来了教学反思
2014/02/11 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
企业介绍信范文
2015/01/30 职场文书
会计主管岗位职责
2015/04/02 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL