详解Angular 中 ngOnInit 和 constructor 使用场景

网友投稿 863 2023-05-06


详解Angular 中 ngOnInit 和 constructor 使用场景

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 DVtZT= 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: `

`,

})

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: `

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('ChildDVtZTComponent constructor', this.pname); // this.name=undefined

}

ngOnInit() {

console.log('ChildComponent ngOnInit', this.pname); // this.name=God eyes

}

}

一目了然。

3. 应用场景

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

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

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

@Component({

selector: 'my-app',

template: `

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']);

}

}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java 简单的计算器程序实例代码
下一篇:单元测试mock工具(单元测试mockup)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~