站長(zhǎng)資訊網(wǎng)最近在工作中實(shí)現(xiàn)一個(gè)feature的時(shí)候，碰到一個(gè)小問(wèn)題：Angular組件拿不到@Input輸入屬性的問(wèn)題，盡管對(duì)這些問(wèn)題都比較了解，但是找問(wèn)題是需要一個(gè)過(guò)程的，所以還是把這個(gè)問(wèn)題總結(jié)記錄了下。
前端（vue）入門(mén)到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
【相關(guān)教程推薦：《angular教程》】
我需要給一個(gè)Component設(shè)置一個(gè)輸入屬性 @Input，好了，直接上代碼，沒(méi)有什么難度。
原代碼是這樣的：
@Component({ selector: 'my-menu', templateUrl: './main-menu.widget.html' }) export class MyMenuWidget { data: any[]; ... constructor(...) { this._changesSubscription = this._service.changes.pipe( map((data: any[]) => { ... return data; }) ).subscribe((data: any[]) => { this.data = data; }); } ... }
添加一個(gè)輸入屬性：
@Component({ selector: 'my-menu', templateUrl: './main-menu.widget.html' }) export class MyMenuWidget { @Input() isMainMenu: boolean = false; data: any[]; ... constructor(...) { this._changesSubscription = this._service.changes.pipe( map((data: any[]) => { ... return data; }) ).subscribe((data: any[]) => { if (this.isMainMenu) { this.data = data.filter((d: any) => d.ID === 233); } else { this.data = data; } }); } ... }
使用起來(lái)：
<my-menu [isMainMenu]="mainMenu"></my-menu>
然后發(fā)現(xiàn)MyMenuWidget里的輸入屬性isMainMenu始終拿不到值，難道哪里拼寫(xiě)有問(wèn)題嗎？檢查了一下，發(fā)現(xiàn)完全沒(méi)有問(wèn)題，但就是拿不到值。
定睛一看，啊啊啊？？？，對(duì)一個(gè)Observable的訂閱居然寫(xiě)在了構(gòu)造函數(shù)里！！！盡管這樣寫(xiě)在一些場(chǎng)景下是可以正常工作的，不影響代碼功能，但是這種寫(xiě)法很不規(guī)范，就像上面例子中的代碼一樣，引起了問(wèn)題。所以，平時(shí)開(kāi)發(fā)過(guò)程中， 不建議去這么寫(xiě)，那正確的寫(xiě)法是什么呢？
上代碼。
@Component({ selector: 'my-menu', templateUrl: './main-menu.widget.html' }) export class MyMenuWidget { @Input() isMainMenu: boolean = false; data: any[]; ... constructor(...) { ... } ngOnInit() { this._changesSubscription = this._service.changes.pipe( map((data: any[]) => { ... return data; }) ).subscribe((data: any[]) => { if (this.isMainMenu) { this.data = data.filter((d: any) => d.ID === 233); } else { this.data = data; } }); } ... }
那么問(wèn)題來(lái)了，為什么同樣的代碼放ngOnInit里就可以正常工作呢？有人會(huì)說(shuō)，我們就是應(yīng)該放ngOnInit里就行了，放構(gòu)造函數(shù)里就是不行。那為啥不行呢，需要去弄明白。
問(wèn)題就是，Angular構(gòu)造函數(shù)和ngOnInit函數(shù)的區(qū)別是什么呢？
區(qū)別一
語(yǔ)言上的區(qū)別：
先從語(yǔ)言的角度上看一下他們的區(qū)別。ngOnInit只是組件類(lèi)上的一個(gè)方法，結(jié)構(gòu)上和類(lèi)上的其他方法沒(méi)有什么不同，只是有一個(gè)特定的名字。
export class MyMenuWidget implements OnInit { ngOnInit() {} }
實(shí)現(xiàn)不實(shí)現(xiàn)他都是可以的，我還可以這么寫(xiě)，完全沒(méi)有問(wèn)題。無(wú)需顯示的標(biāo)記要實(shí)現(xiàn)這個(gè)接口。
export class MyMenuWidget { ngOnInit() {} }
這是ES6的寫(xiě)法，上面的代碼用ES5怎么寫(xiě)呢？
構(gòu)造函數(shù)和他完全不一樣，他會(huì)在創(chuàng)建類(lèi)實(shí)例的時(shí)候會(huì)被調(diào)用。
export class MyMenuWidget { constructor(){} ngOnInit() {} }
區(qū)別二
組件初始化過(guò)程的區(qū)別：
從組件初始化角度來(lái)看兩者的區(qū)別，還是很大的。Angular的啟動(dòng)過(guò)程有兩個(gè)主要階段：
1. 構(gòu)造組件樹(shù)； 2. 執(zhí)行變更檢測(cè)；
當(dāng)Angular構(gòu)造組件樹(shù)時(shí)候，需要?jiǎng)?chuàng)建組件實(shí)例，首先就會(huì)調(diào)用構(gòu)造函數(shù)new 一個(gè)實(shí)例出來(lái)，也就是調(diào)用組件類(lèi)的構(gòu)造函數(shù)。然后調(diào)用，包括ngOnInit的所有生命周期鉤子都作為變更檢測(cè)階段的一部分被調(diào)用。
當(dāng)Angular開(kāi)始變更檢測(cè)時(shí)，組件樹(shù)已經(jīng)構(gòu)建好，并且已經(jīng)調(diào)用樹(shù)中所有組件的構(gòu)造函數(shù)。此外，此時(shí)每個(gè)組件的模板節(jié)點(diǎn)都添加到DOM中。 在這里，你可以使用初始化組件所需的所有數(shù)據(jù)——DI provider，DOM等。@Input通信機(jī)制作為變更檢測(cè)階段的一部分進(jìn)行處理的，所以@Input在構(gòu)造函數(shù)中不可用。
export class MyMenuWidget { constructor(private _elementRef: ElementRef){ ... } ngOnInit() {} }
區(qū)別三
功能上的區(qū)別：
對(duì)于Angular構(gòu)造函數(shù)，主要用來(lái)初始化，和注入依賴(lài)關(guān)系。通常的做法是，盡可能少放邏輯到構(gòu)造函數(shù)中，有時(shí)候，盡管你放了很多邏輯但不影響功能。
對(duì)于ngOnInit，Angular在創(chuàng)建組件的DOM，使用構(gòu)造函數(shù)注入所有必須的依賴(lài)，完成初始化后調(diào)用ngOnInit，這是執(zhí)行組件初始化邏輯的好地方。
簡(jiǎn)單的說(shuō) ，constructor構(gòu)造函數(shù)本身是和Angular無(wú)關(guān)的，ngOnInit這些鉤子函數(shù)是Angular里定義的。
總結(jié)
現(xiàn)在是不是清楚為什么@Input在構(gòu)造函數(shù)里拿不到值的了吧。以后也清楚哪些邏輯放構(gòu)造函數(shù)里，哪些放ngOnInit里了吧。
