Angular2 constructor VS ngOnInit
constructor和ngOnInit钩子有什么不同?
constructor
constructor(构造函数)是ES6类或TypeScript类中的特殊方法,而不是Angular的方法,主要用来做初始化操作,在进行类实例化操作是,会被自动调用。通过constructor方法并不能使我们知道Angular何时完成了组件的初始化工作。
仅显示constructor方法:
import { Component } from '@angular/core'; @Component({})
class ExampleComponent {
// this is called by the JavaScript engine
// rather than Angular
constructor(name) {
console.log('Constructor initialised');
this.name = name;
}
} // internally calls the constructor
let appCmp = new ExampleComponent('AppCmp');
console.log(appCmp.name);
运行以上代码,控制台输出结果:
Constructor initialization
AppCmp
constructor方法是由JavaScript引擎调用的,而不是Angular,这就是为什么ngOnInit生命周期钩子被创建的原因。
ngOnInit
ngOnInit 是 Angular 2 组件生命周期中的一个钩子,Angular 2 中的所有钩子和调用顺序如下:
ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法,用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用
其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。
另外需要注意的是 ngOnInit 钩子只会被调用一次,我们来看一下具体示例:
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
<p>Hello {{name}}</p>
`,
})
export class AppComponent implements OnInit { name: string = ''; constructor() {
console.log('Constructor initialization');
this.name = 'Semlinker';
} ngOnInit() {
console.log('ngOnInit hook has been called');
}
}
以上代码运行后,控制台输出结果:
Constructor initialization
ngOnInit hook has been called
接下来看一个父-子组件传参的例子:
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 = 'Semlinker';
}
}
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); // Output:undefined
} ngOnInit() {
console.log('ChildComponent ngOnInit', this.pname);
}
}
以上代码运行后,控制台输出结果:
ChildComponent constructor undefined
ChildComponent ngOnInit Semlinker
我们发现在 ChildComponent 构造函数中,是无法获取输入属性的值,而在 ngOnInit 方法中,我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在 ngOnInit 方法内能获取到输入的属性。
constructor 应用场景
在 Angular 2 中,构造函数一般用于依赖注入或执行一些简单的初始化操作。
import { Component, ElementRef } from '@angular/core'; @Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
<p>Hello {{name}}</p>
`,
})
export class AppComponent {
name: string = ''; constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
this.name = 'Semlinker'; // 执行初始化操作
}
}
ngOnInit 应用场景
在项目开发中我们要尽量保持构造函数简单明了,让它只执行简单的数据初始化操作,因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后,需执行组件初始化操作等。
import { Component, OnInit } from '@angular/core'; @Component({})
class ExampleComponent implements OnInit {
constructor() {} // called on demand by Angular
ngOnInit() {
console.log('ngOnInit fired');
}
} const instance = new ExampleComponent(); // Angular calls this when necessary
instance.ngOnInit();
Angular2 constructor VS ngOnInit的更多相关文章
- Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...
- 【转】Angular之constructor和ngOnInit差异及适用场景
原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html -------------- ...
- Angular之constructor和ngOnInit差异及适用场景
constructor会在类生成实例时调用,Angular无法控制constructor,constructor中应该只进行依赖注入而不是进行真正的业务操作 ngOnInit属于Angular生命周期 ...
- Angular之constructor和ngOnInit差异及适用场景(转)
原始地址:https://blog.csdn.net/u010730126/article/details/64486997 Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函 ...
- “英雄之旅”见闻和小结----angular2系列(三)
前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...
- Angular2快速入门-4.创建一个服务(创建NewsService提供数据)
上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- angular4 组件通讯、生命周期
主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...
随机推荐
- web工程中文字符乱码:try { res.setContentType("text/html;charset=gbk"); PrintWriter pw=res.getWriter(); ;;; }
输入正确的name ,pwd 跳转到main 页面 证明:登录信息确认基本正确 用户名,密码不对时提示:信息错误 注意编码格式: 应设置如下:在try中设置字符编码为gbk,在try外有时出错,设置 ...
- MySQL学习基础
MySQL是被Sun公司收购了,所以也有热咖啡图标,不过MySQL的作者后来又做了一个MariaDB,小海豚图标,也很好用. MySQL学习: <MySQL网络数据库设计与开发>(电子工业 ...
- [转] .NET出现频率非常高的笔试题
又到了金三银四的跳槽季,许多朋友又开始跳槽了,这里我简单整理了一些出现频率比较高的.NET笔试题,希望对广大求职者有所帮助. 一..net基础 1. a=10,b=15,请在不使用第三方变量的情况下 ...
- Java基础-基于《Thinking In Java》
摘要 本文是对一些java基础知识的整理,把之前印象笔记里面的全部慢慢搬到这个blog来 为了方便就按照<Thinking In Java>的目录来编辑. 这里面的内容均为面试题相关,可能 ...
- C++学习笔记: 智能指针
c++ 智能指针学习新的 class Simple { public: Simple() { number = param; std::cout << "Simple: &quo ...
- Oracle客户端安装以及PL/SQL Developer安装方法
1,安装Oracle客户端 2,配置数据库,如下: 安装路径:D:\app\ThinkPad\product\11.2.0\client_1\network\admin 建立文件:tnsnames.o ...
- CAS服务器集群和客户端集群环境下的单点登录和单点注销解决方案
CAS的集群环境,包括CAS的客户应用是集群环境,以及CAS服务本身是集群环境这两种情况.在集群环境下使用CAS,要解决两个问题,一是单点退出(注销)时,CAS如何将退出请求正确转发到用户sessio ...
- Android浮动按钮
https://www.jianshu.com/p/18cbc862ba7b https://github.com/yhaolpz/FloatWindow 这样就解决了切换 Activity 时悬浮控 ...
- select 时进行update的操作,在高并发下引起死锁
场景:当用户查看帖子详情时,把帖子的阅读量:ReadCount+1 select title,content,readcount from post where id='xxxx' --根据主键查 ...
- C# 装箱和拆箱[整理](转)
//1. // 装箱和拆箱是一个抽象的概念 //2. // 装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型 // 利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的值相互 ...