您好,登錄后才能下訂單哦!
ngOnInit和constructor怎么在Angular 中使用?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
1. constructor
constructor
應(yīng)該是ES6中明確使用constructor
來(lái)表示構(gòu)造函數(shù)的,構(gòu)造函數(shù)使用在class
中,用來(lái)做初始化操作。當(dāng)包含constructor
的類(lèi)被實(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每次銷(xiāo)毀指令/組件之前調(diào)用并清掃。在這兒反訂閱可觀察對(duì)象和分離事件處理器,以防內(nèi)存泄漏。
在Angular銷(xiāo)毀指令/組件之前調(diào)用。
了解了這些之后我們來(lái)看一個(gè)例子:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h2>Welcome to Angular World</h2> `, }) 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: ` <h2>Welcome to Angular World</h2> <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>父組件的名稱(chēng):{{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)行任何與組件通信類(lèi)似的復(fù)雜操作,一般在constructor中值進(jìn)行一些簡(jiǎn)單的初始化工作:依賴(lài)注入,變量初始化等。
那么用到組件間通信的方法我們可以放在ngOnInit中去執(zhí)行,比如異步請(qǐng)求等:
import { Component, ElementRef, OnInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h2>Welcome to Angular World</h2> <p>Hello {{name}}</p> `, }) export class AppComponent implements OnInt { name: string = ''; constructor(public elementRef: ElementRef) { // 使用構(gòu)造注入的方式注入依賴(lài)對(duì)象 this.name = 'WXY'; // 執(zhí)行初始化操作 } ngOnInit() { this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']); } }
看完上述內(nèi)容,你們掌握ngOnInit和constructor怎么在Angular 中使用的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。