最初學(xué)習(xí)Angular的時(shí)候總是搞不清楚ngOnInit和constructor的區(qū)別官研，現(xiàn)在我們來(lái)稍微理一下兩者之間的區(qū)別侈询。
1. constructor
constructor應(yīng)該是ES6中明確使用constructor來(lái)表示構(gòu)造函數(shù)的循捺，構(gòu)造函數(shù)使用在class中，用來(lái)做初始化操作。當(dāng)包含constructor的類被實(shí)例化時(shí)，構(gòu)造函數(shù)將被調(diào)用懂酱。
來(lái)看例子：
class AppComponent {
public name: string;
constructor(name) {
console.log('Constructor initialization');
this.name = name;
}
}
let appCmp = new AppComponent('AppCmp'); // 這時(shí)候構(gòu)造函數(shù)將被調(diào)用。
console.log(appCmp.name);
轉(zhuǎn)成ES5代碼如下:
var AppComponent = (function () {
function AppComponent(name) {
console.log('Constructor initialization');
this.name = name;
}
return AppComponent; // 這里直接返回一個(gè)實(shí)例
}());
var appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);
2. ngOnInit
ngOnInit是Angular中OnInit鉤子的實(shí)現(xiàn)誊抛。用來(lái)初始化組件列牺。
Angular中生命周期鉤子的調(diào)用順序如下：
-
ngOnChanges-- 當(dāng)被綁定的輸入屬性的值發(fā)生變化時(shí)調(diào)用，首次調(diào)用一定會(huì)發(fā)生在ngOnInit()之前拗窃。 -
ngOnInit()-- 在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后瞎领，初始化指令/組件。
在第一輪ngOnChanges()完成之后調(diào)用随夸，只調(diào)用一次九默。 -
ngDoCheck-- 自定義的方法，用于檢測(cè)和處理值的改變宾毒。 -
ngAfterContentInit-- 在組件內(nèi)容初始化之后調(diào)用驼修，只適用于組件 -
ngAfterContentChecked-- 組件每次檢查內(nèi)容時(shí)調(diào)用，只適用于組件 -
ngAfterViewInit-- 組件相應(yīng)的視圖初始化之后調(diào)用伍俘，只適用于組件 -
ngAfterViewChecked-- 組件每次檢查視圖時(shí)調(diào)用邪锌，只適用于組件 -
ngOnDestroy-- 當(dāng)Angular每次銷毀指令/組件之前調(diào)用并清掃。在這兒反訂閱可觀察對(duì)象和分離事件處理器癌瘾，以防內(nèi)存泄漏。
在Angular銷毀指令/組件之前調(diào)用饵溅。
了解了這些之后我們來(lái)看一個(gè)例子：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
`,
})
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的執(zhí)行是在先的。
那么既然ngOnchanges是輸入屬性值變化的時(shí)候調(diào)用，并且ngOnInit是在ngOnchanges執(zhí)行完之后才調(diào)用咬荷，而constructor是在組件就實(shí)例化的時(shí)候就已經(jīng)調(diào)用了冠句，這也就是說(shuō)，在constructor中我們是取不到輸入屬性的值的幸乒。
所以還是看例子:
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'exe-parent',
template: `
<h1>Welcome to Angular World</h1>
<p>Hello {{name}}</p>
<exe-child [pname]="name"></exe-child> <!-- 綁定到子組件的屬性 -->
`,
})
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: `
<p>父組件的名稱：{{pname}} </p>
`
})
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. 應(yīng)用場(chǎng)景
看完的上面的部分可以發(fā)現(xiàn)，在constructor中不適合進(jìn)行任何與組件通信類似的復(fù)雜操作罕扎，一般在constructor中值進(jìn)行一些簡(jiǎn)單的初始化工作：依賴注入聚唐，變量初始化等。
那么用到組件間通信的方法我們可以放在ngOnInit中去執(zhí)行腔召，比如異步請(qǐng)求等：
import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
<p>Hello {{name}}</p>
`,
})
export class AppComponent implements OnInt {
name: string = '';
constructor(public elementRef: ElementRef) { // 使用構(gòu)造注入的方式注入依賴對(duì)象
this.name = 'WXY'; // 執(zhí)行初始化操作
}
ngOnInit() {
this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']);
}
}
文章深得semlinker大神的指點(diǎn)杆查。
