Angular組件拿不到@Input輸入屬性問題探究解決方法
我需要給一個Component設(shè)置一個輸入屬性 @Input，好了，直接上代碼，沒有什么難度。
原代碼是這樣的：
@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;
});
}
...
}添加一個輸入屬性：
@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;
}
});
}
...
}使用起來：
<my-menu [isMainMenu]="mainMenu"></my-menu>
然后發(fā)現(xiàn)MyMenuWidget里的輸入屬性isMainMenu始終拿不到值，難道哪里拼寫有問題嗎？檢查了一下，發(fā)現(xiàn)完全沒有問題，但就是拿不到值。
定睛一看，啊啊?。?？？，對一個Observable的訂閱居然寫在了構(gòu)造函數(shù)里?。?！盡管這樣寫在一些場景下是可以正常工作的，不影響代碼功能，但是這種寫法很不規(guī)范，就像上面例子中的代碼一樣，引起了問題。所以，平時開發(fā)過程中， 不建議去這么寫，那正確的寫法是什么呢？
上代碼。
@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;
}
});
}
...
}那么問題來了，為什么同樣的代碼放ngOnInit里就可以正常工作呢？有人會說，我們就是應(yīng)該放ngOnInit里就行了，放構(gòu)造函數(shù)里就是不行。那為啥不行呢，需要去弄明白。
問題就是，Angular構(gòu)造函數(shù)和ngOnInit函數(shù)的區(qū)別是什么呢？
區(qū)別一
語言上的區(qū)別：
先從語言的角度上看一下他們的區(qū)別。ngOnInit只是組件類上的一個方法，結(jié)構(gòu)上和類上的其他方法沒有什么不同，只是有一個特定的名字。
export class MyMenuWidget implements OnInit {
ngOnInit() {}
}實現(xiàn)不實現(xiàn)他都是可以的，我還可以這么寫，完全沒有問題。無需顯示的標記要實現(xiàn)這個接口。
export class MyMenuWidget {
ngOnInit() {}
}這是ES6的寫法，上面的代碼用ES5怎么寫呢？
構(gòu)造函數(shù)和他完全不一樣，他會在創(chuàng)建類實例的時候會被調(diào)用。
export class MyMenuWidget {
constructor(){}
ngOnInit() {}
}區(qū)別二
組件初始化過程的區(qū)別：
從組件初始化角度來看兩者的區(qū)別，還是很大的。Angular的啟動過程有兩個主要階段：
1. 構(gòu)造組件樹；
2. 執(zhí)行變更檢測；
當(dāng)Angular構(gòu)造組件樹時候，需要創(chuàng)建組件實例，首先就會調(diào)用構(gòu)造函數(shù)new 一個實例出來，也就是調(diào)用組件類的構(gòu)造函數(shù)。然后調(diào)用，包括ngOnInit的所有生命周期鉤子都作為變更檢測階段的一部分被調(diào)用。
當(dāng)Angular開始變更檢測時，組件樹已經(jīng)構(gòu)建好，并且已經(jīng)調(diào)用樹中所有組件的構(gòu)造函數(shù)。此外，此時每個組件的模板節(jié)點都添加到DOM中。 在這里，你可以使用初始化組件所需的所有數(shù)據(jù)——DI provider，DOM等。@Input通信機制作為變更檢測階段的一部分進行處理的，所以@Input在構(gòu)造函數(shù)中不可用。
export class MyMenuWidget {
constructor(private _elementRef: ElementRef){
...
}
ngOnInit() {}
}區(qū)別三
功能上的區(qū)別：
對于Angular構(gòu)造函數(shù)，主要用來初始化，和注入依賴關(guān)系。通常的做法是，盡可能少放邏輯到構(gòu)造函數(shù)中，有時候，盡管你放了很多邏輯但不影響功能。
對于ngOnInit，Angular在創(chuàng)建組件的DOM，使用構(gòu)造函數(shù)注入所有必須的依賴，完成初始化后調(diào)用ngOnInit，這是執(zhí)行組件初始化邏輯的好地方。
簡單的說 ，constructor構(gòu)造函數(shù)本身是和Angular無關(guān)的，ngOnInit這些鉤子函數(shù)是Angular里定義的。
總結(jié)
現(xiàn)在是不是清楚為什么@Input在構(gòu)造函數(shù)里拿不到值的了吧。以后也清楚哪些邏輯放構(gòu)造函數(shù)里，哪些放ngOnInit里了吧。
到此這篇關(guān)于Angular組件拿不到@Input輸入屬性問題探究解決方法的文章就介紹到這了,更多相關(guān)Angular @Input輸入屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法2016-03-03
這篇文章主要介紹了rewrap-ajax.js插件,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了如何采用call方式實現(xiàn)js繼承,需要的朋友可以參考下2014-05-05
Javascript和Java、C這些語言不同，它是一種無類型、弱檢測的語言。它對變量的定義并不需要聲明變量類型，我們只要通過賦值的形式，可以將各種類型的數(shù)據(jù)賦值給同一個變量2012-01-01
今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS煙花背景效果實現(xiàn)方法,實例分析了javascript操作dom元素實現(xiàn)煙花特效的技巧,需要的朋友可以參考下2015-03-03
你可能從未使用過的11+個JavaScript特性(小結(jié))
這篇文章主要介紹了你可能從未使用過的11+個JavaScript特性(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細介紹了微信小程序使用視頻播放器video組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
在寫程序過程中，經(jīng)常會遇到去除數(shù)組中重復(fù)元素的需求。要實現(xiàn)這個功能其實并不難2011-01-01
這篇文章主要介紹了JS返回iframe中frameBorder屬性值的方法,分析了frameBorder屬性的功能及javascript獲取frameBorder屬性值的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04