constructor和OnInit的区别和适用场景
一、区别
1.1 constructor
Es6中引入了类的概念,constructor是类中的特殊函数,并不属于Angular的范畴,Angular不能控制constructor,constructor会在类生成实例时自动被调用。
1.2 ngOnInit
constructor不受Angular的控制,因此就有了ngOnInit。ngOnInit是Angular生命周期中的一个钩子,ngOnInit的官方解释是:ngOnInit在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
二、适用场景
2.1 constructor
constructor 函数一般用于依赖注入或执行一些简单的初始化操作
import { Component, ElementRef } from '@angular/core';
import{ ActivatedRoute } from '@angular/router';
@Component({
selector: 'hello',
templateUrl: './hello.html'
})
class Hello {
constructor(private activatedRoute:ActivatedRoute) {
// 在类中就可以使用this.activatedRoute了
}
}
2.2 ngOnInit
ngOnInit 纯粹是通知开发者组件/指令已经被初始化完成了,此时组件/指令上的属性绑定操作以及输入操作已经完成,也就是说在 ngOnInit
函数中我们已经能够操作组件/指令中被传入的数据了。在项目开发中,我们要尽量保证 constructor 函数的简洁明了,contructor 只做数据的简单初始化和依赖注入。其余的数据初始化操作,例如 组件获取输入属性之后,需执行组件初始化操作等等,都要放在 ngOnInit 中执行。
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<p>Hello {{name}}!</p>`
})
class Hello implements OnInit {
@Input()
name: string;
constructor() {
// constructor中还不能获取到组件/指令中被传入的数据
console.log(this.name); // undefined
}
ngOnInit() {
// ngOnInit中已经能够获取到组件/指令中被传入的数据
console.log(this.name); // 传入的数据
}
}
开发中我们经常在ngOnInit
做一些初始化的工作,而这些工作尽量要避免在constructor
中进行,constructor
中应该只进行依赖注入而不是进行真正的业务操作。
转载于:https://www.cnblogs.com/Lyh1997/p/11022091.html