Angular之constructor和ngOnInit差异及适用场景
2018-01-03 17:29
525 查看
原文出处:http://blog.csdn.net/u010730126/article/details/64486997
Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函数,其中最常用的就是
2
3
4
5
6
7
8
9
10
11
12
13
14
15
既然Angular无法控制
ngOnInit用于在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
即使Angular定义了
2
3
4
5
6
7
8
9
10
11
在
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
所以我们可以在
开发中我们经常在
Angular生命周期文档
constructor文档
组件传值
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();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
既然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调用'); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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了 } }1
2
3
4
5
6
7
8
9
10
11
在
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); // 传入的数据 } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
所以我们可以在
ngOnInit中做一些初始化操作。
总结
开发中我们经常在ngOnInit做一些初始化的工作,而这些工作尽量要避免在
constructor中进行,
constructor中应该只进行依赖注入而不是进行真正的业务操作。
参考文档
Angular生命周期文档constructor文档
组件传值
相关文章推荐
- 详解Angular之constructor和ngOnInit差异及适用场景
- Angular之constructor和ngOnInit差异及适用场景
- Angular之constructor和ngOnInit差异及适用场景
- 详解Angular 中 ngOnInit 和 constructor 使用场景
- Angular 的 ngOnInit 和 Constructor 的区别!
- Angular2 constructor VS ngOnInit
- Angular 的 ngOnInit 和 Constructor 的区别
- Angular中Constructor 和 ngOnInit 的本质区别
- Angular中Constructor 和 ngOnInit 的本质区别
- Angular2中constructor与ngOninit的区别
- What is the difference between Constructor and ngOnInit?
- 【Angular4】constructor & ngOnInit
- 【Angular】ngOnInit()方法介绍
- ngOnInit与constructor的区别
- Ajax技术适用和不适用场景简析
- Ajax适用场景
- (转)一网打尽当下NoSQL类型、适用场景及使用公司
- ThreadLocal的原理与适用场景
- list与Set、Map区别及适用场景