13518219792
ngOnInit和constructor怎么在Angular 中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
1. constructor
constructor应该是ES6中明确使用constructor来表示构造函数的，构造函数使用在class中，用来做初始化操作。当包含constructor的类被实例化时，构造函数将被调用。
来看例子：
class AppComponent {
public name: string;
constructor(name) {
console.log('Constructor initialization');
this.name = name;
}
}
let appCmp = new AppComponent('AppCmp'); // 这时候构造函数将被调用。
console.log(appCmp.name);转成ES5代码如下:
var AppComponent = (function () {
function AppComponent(name) {
console.log('Constructor initialization');
this.name = name;
}
return AppComponent; // 这里直接返回一个实例
}());
var appCmp = new AppComponent('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: `
Welcome to Angular World
`,
})
export class AppComponent implements OnInit {
constructor() {
console.log('Constructor initialization');
}
ngOnInit() {
console.log('ngOnInit hook has been called');
}
}这里输出的是:
Constructor initialization
ngOnInit hook has been called
可以看出，constructor的执行是在先的。
那么既然ngOnchanges是输入属性值变化的时候调用，并且ngOnInit是在ngOnchanges执行完之后才调用，而constructor是在组件就实例化的时候就已经调用了，这也就是说，在constructor中我们是取不到输入属性的值的。
所以还是看例子:
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'exe-parent',
template: `
Welcome to Angular World
Hello {{name}}
`,
})
export class ParentComponent {
name: string;
constructor() {
this.name = 'God eyes';
}
} // child.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'exe-child',
template: `
父组件的名称：{{pname}}
`
})
export class ChildComponent implements OnInit {
@Input()
pname: string; // 父组件的输入属性
constructor() {
console.log('ChildComponent constructor', this.pname); // this.name=undefined
}
ngOnInit() {
console.log('ChildComponent ngOnInit', this.pname); // this.name=God eyes
}
}一目了然。
3. 应用场景
看完的上面的部分可以发现，在constructor中不适合进行任何与组件通信类似的复杂操作，一般在constructor中值进行一些简单的初始化工作：依赖注入，变量初始化等。
那么用到组件间通信的方法我们可以放在ngOnInit中去执行，比如异步请求等：
import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Welcome to Angular World
Hello {{name}}
`,
})
export class AppComponent implements OnInt {
name: string = '';
constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
this.name = 'WXY'; // 执行初始化操作
}
ngOnInit() {
this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']);
}
}看完上述内容，你们掌握ngOnInit和constructor怎么在Angular 中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联网站建设公司行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
