详解Angular 中 ngOnInit 和 constructor 使用场景

2024-02-18 10:52:03 403

1.constructor

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

来看例子：

classAppComponent{
publicname:string;
constructor(name){
console.log('Constructorinitialization');
this.name=name;
}
}

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

转成ES5代码如下:

varAppComponent=(function(){
functionAppComponent(name){
console.log('Constructorinitialization');
this.name=name;
}
returnAppComponent;//这里直接返回一个实例
}());
varappCmp=newAppComponent('AppCmp');
console.log(appCmp.name);

2.ngOnInit

ngOnInit是Angular中OnInit钩子的实现。用来初始化组件。

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

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

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

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

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

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
`,
})
exportclassAppComponentimplementsOnInit{

constructor(){
console.log('Constructorinitialization');
}

ngOnInit(){
console.log('ngOnInithookhasbeencalled');
}
}

这里输出的是:

Constructorinitialization
ngOnInithookhasbeencalled

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

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

//parent.component.ts

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

@Component({
selector:'exe-parent',
template:`
WelcometoAngularWorld
Hello{{name}}

`,
})
exportclassParentComponent{
name:string;

constructor(){
this.name='Godeyes';
}
}

//child.component.ts

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

@Component({
selector:'exe-child',
template:`
父组件的名称：{{pname}}
`
})
exportclassChildComponentimplementsOnInit{
@Input()
pname:string;//父组件的输入属性

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

ngOnInit(){
console.log('ChildComponentngOnInit',this.pname);//this.name=Godeyes
}
}

一目了然。

3.应用场景

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

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

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

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}}
`,
})
exportclassAppComponentimplementsOnInt{
name:string='';

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解Angular 中 ngOnInit 和 constructor 使用场景

WelcometoAngularWorld

WelcometoAngularWorld

WelcometoAngularWorld

热门推荐

随机推荐