第詳解Angular中ngOnInit和constructor使用場景1.constructor

constructor應(yīng)該是ES6中明確使用constructor來表示構(gòu)造函數(shù)的，構(gòu)造函數(shù)使用在class中，用來做初始化操作。當(dāng)包含constructor的類被實(shí)例化時，構(gòu)造函數(shù)將被調(diào)用。

來看例子：

classAppComponent{

publicname:string;

constructor(name){

console.log('Constructorinitialization');

=name;

letappCmp=newAppComponent('AppCmp');//這時候構(gòu)造函數(shù)將被調(diào)用。

console.log(appC);

轉(zhuǎn)成ES5代碼如下:

varAppComponent=(function(){

functionAppComponent(name){

console.log('Constructorinitialization');

=name;

returnAppComponent;//這里直接返回一個實(shí)例

}());

varappCmp=newAppComponent('AppCmp');

console.log(appC);

2.ngOnInit

ngOnInit是Angular中OnInit鉤子的實(shí)現(xiàn)。用來初始化組件。

Angular中生命周期鉤子的調(diào)用順序如下：

ngOnChanges--當(dāng)被綁定的輸入屬性的值發(fā)生變化時調(diào)用，首次調(diào)用一定會發(fā)生在ngOnInit()之前。

ngOnInit()--在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件。在第一輪ngOnChanges()完成之后調(diào)用，只調(diào)用一次。

ngDoCheck--自定義的方法，用于檢測和處理值的改變。

ngAfterContentInit--在組件內(nèi)容初始化之后調(diào)用，只適用于組件

ngAfterContentChecked--組件每次檢查內(nèi)容時調(diào)用，只適用于組件

ngAfterViewInit--組件相應(yīng)的視圖初始化之后調(diào)用，只適用于組件

ngAfterViewChecked--組件每次檢查視圖時調(diào)用，只適用于組件

ngOnDestroy--當(dāng)Angular每次銷毀指令/組件之前調(diào)用并清掃。在這兒反訂閱可觀察對象和分離事件處理器，以防內(nèi)存泄漏。

在Angular銷毀指令/組件之前調(diào)用。

了解了這些之后我們來看一個例子：

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

@Component({

selector:'my-app',

template:`

h1WelcometoAngularWorld/h1

exportclassAppComponentimplementsOnInit{

constructor(){

console.log('Constructorinitialization');

ngOnInit(){

console.log('ngOnInithookhasbeencalled');

這里輸出的是:

Constructorinitialization

ngOnInithookhasbeencalled

可以看出，constructor的執(zhí)行是在先的。

那么既然ngOnchanges是輸入屬性值變化的時候調(diào)用，并且ngOnInit是在ngOnchanges執(zhí)行完之后才調(diào)用，而constructor是在組件就實(shí)例化的時候就已經(jīng)調(diào)用了，這也就是說，在constructor中我們是取不到輸入屬性的值的。

所以還是看例子:

//ponent.ts

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

@Component({

selector:'exe-parent',

template:`

h1WelcometoAngularWorld/h1

pHello{{name}}/p

exe-child[pname]="name"/exe-chil