【转】Angular之constructor和ngOnInit差异及适用场景
原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html
-------------------------------------------
Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函数,其中最常用的就是ngOnInit
。但在TypeScript或ES6中还存在着名为constructor
的构造函数,开发过程中经常会混淆二者,毕竟它们的含义有某些重复部分,那ngOnInit
和constructor
之间有什么区别呢?它们各自的适用场景又是什么呢?
区别#
constructor
是ES6引入类的概念后新出现的东东,是类的自身属性,并不属于Angular的范畴,所以Angular没有办法控制constructor
。constructor
会在类生成实例时调用:
import {Component} from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld {
constructor() {
console.log('constructor被调用,但和Angular无关');
}
}
// 生成类实例,此时会调用constructor
new HelloWorld();
既然Angular无法控制constructor
,那么ngOnInit
的出现就不足为奇了,毕竟枪把子得握在自己手里才安全。
ngOnInit
的作用根据官方的说法:
ngOnInit用于在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
ngOnInit
属于Angular生命周期的一部分,其在第一轮ngOnChanges完成之后调用,并且只调用一次:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld implements OnInit {
constructor() {
}
ngOnInit() {
console.log('ngOnInit被Angular调用');
}
}
constructor适用场景#
即使Angular定义了ngOnInit
,constructor
也有其用武之地,其主要作用是注入依赖,特别是在TypeScript开发Angular工程时,经常会遇到类似下面的代码:
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
class HelloWorld {
constructor(private elementRef: ElementRef) {
// 在类中就可以使用this.elementRef了
}
}
在constructor
中注入的依赖,就可以作为类的属性被使用了。
ngOnInit适用场景#
ngOnInit
纯粹是通知开发者组件/指令已经被初始化完成了,此时组件/指令上的属性绑定操作以及输入操作已经完成,也就是说在ngOnInit
函数中我们已经能够操作组件/指令中被传入的数据了:
// hello-world.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'hello-world',
template: `<p>Hello {{name}}!</p>`
})
class HelloWorld implements OnInit {
@Input()
name: string;
constructor() {
// constructor中还不能获取到组件/指令中被传入的数据
console.log(this.name); // undefined
}
ngOnInit() {
// ngOnInit中已经能够获取到组件/指令中被传入的数据
console.log(this.name); // 传入的数据
}
}
所以我们可以在ngOnInit
中做一些初始化操作。
总结#
开发中我们经常在ngOnInit
做一些初始化的工作,而这些工作尽量要避免在constructor
中进行,constructor
中应该只进行依赖注入而不是进行真正的业务操作。
【转】Angular之constructor和ngOnInit差异及适用场景的更多相关文章
- Angular之constructor和ngOnInit差异及适用场景(转)
原始地址:https://blog.csdn.net/u010730126/article/details/64486997 Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函 ...
- Angular之constructor和ngOnInit差异及适用场景
constructor会在类生成实例时调用,Angular无法控制constructor,constructor中应该只进行依赖注入而不是进行真正的业务操作 ngOnInit属于Angular生命周期 ...
- Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...
- Angular2 constructor VS ngOnInit
constructor和ngOnInit钩子有什么不同? constructor constructor(构造函数)是ES6类或TypeScript类中的特殊方法,而不是Angular的方法,主要用来 ...
- angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
- [Angular] Some performance tips
The talk from here. 1. The lifecycle in Angular component: constructor vs ngOnInit: Constructor: onl ...
- Angular开发实践(六):服务端渲染
Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...
随机推荐
- hdu1540
怎么会T啊 /* 三种操作:D x:第x个位置1 Q x:查询第x位置所在的0连续块 R :将上次D的位置置0 */ #include<iostream> #include<algo ...
- 性能测试十八:jmeter分布式
一台压力机产生得压力是有限的,尤其是jmeter,java本来性能就不是很好,并发特别多的时候,jmeter的性能会急剧下降,正常的接口,若单台压力机,超过1000并发以后,jmeter的性能就不怎么 ...
- pytest一:pytest 框架介绍
pytest 是 python 的一种单元测试框架,与python 自带的 unittest测试框架类似,但是比 unittest 框架使用起来更简洁,效率更高.根据pytest 的官方网站介绍,它具 ...
- List中存放字符串进行排序
package com.bjpowernode.t03sort; import java.util.ArrayList;import java.util.Collections; /* * List中 ...
- LINQ学习之旅(五)
Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 Union All/Union/Intersect操作 适用场景:对两个集 ...
- IntelliJ IDEA快捷键:Ctrl+Alt+B
To navigate to the implementation(s) of an abstract method,position the caret at its usage or its na ...
- git的入门摸索和入门研究
git官网:https://git-scm.com/ git教程---菜鸟教程:http://www.runoob.com/git/git-tutorial.html git教程---廖雪峰:http ...
- Linux !的使用
转自:https://www.linuxidc.com/Linux/2015-05/117774.htm 一.history 78 cd /mnt/ 79 ls 80 cd / 81 history ...
- gitlab发送邮件
1.修改配置文件,建议使用企业邮箱 #vim /etc/gitlab/gitlab.rb gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_a ...
- 菜单联动,select联动菜单(搜索之后默认选中)
框架:thinkphp php控制器代码: $schedulelist = M('schedule')->getField('sid,schedule_name'); $this->ass ...