最近在工作中實作一個feature的時候，碰到一個小問題：Angular元件拿不到@Input輸入屬性的問題，儘管對這些問題都比較了解，但是找問題是需要一個過程的，所以還是把這個問題總結記錄了下來。
【相關教學推薦：《angular教學》】
我需要給一個Component設定一個輸入屬性@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>
接著發現MyMenuWidget裡的輸入屬性isMainMenu總是拿不到值，哪裡拼字有問題嗎？檢查了一下，發現完全沒有問題，但就是拿不到值。
定睛一看，啊啊啊？ ？ ？ ，對一個Observable的訂閱居然寫在建構子裡了！ ！ ！雖然這樣寫在一些場景下是可以正常運作的，不影響程式碼功能，但是這種寫法很不規範，就像上面例子中的程式碼一樣，造成了問題。所以，平常開發過程中， 不建議去這麼寫，那正確的寫法是什麼呢？
上程式碼。
@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裡面就可以正常運作呢？有人會說，我們就是應該放ngOnInit裡面就行了，放建構函式裡面就是不行。那為啥不行呢，需要去弄清楚。
問題就是，Angular建構子和ngOnInit函式的差別是什麼呢？
語言上的差異：
先從語言的角度來看他們的差異。 ngOnInit只是組件類別上的一個方法，結構上和類別上的其他方法沒有什麼不同，只是有一個特定的名字。
export class MyMenuWidget implements OnInit {
ngOnInit() {}
}實現不實現他都是可以的，我還可以這麼寫，完全沒有問題。無需顯示的標記要實現這個介面。
export class MyMenuWidget {
ngOnInit() {}
}這是ES6的寫法，上面的程式碼用ES5怎麼寫呢？
建構函式和他完全不一樣，他會在建立類別實例的時候會被呼叫。
export class MyMenuWidget {
constructor(){}
ngOnInit() {}
}元件初始化過程的差異：
從元件初始化角度來看兩者的差別，還是很大的。 Angular的啟動過程有兩個主要階段：
1. 建構元件樹； 2. 執行變更偵測;
當Angular建構元件樹時候，需要建立元件實例，首先就會呼叫建構函式new 一個實例出來，也就是呼叫元件類別的建構子。然後調用，包括ngOnInit的所有生命週期鉤子都作為變更檢測階段的一部分被調用。
當Angular開始變更偵測時，元件樹已經建構好，並且已經呼叫樹中所有元件的建構子。此外，此時每個元件的模板節點都會加入DOM。在這裡，你可以使用初始化元件所需的所有資料——DI provider，DOM等。 @Input通訊機製作為變更檢測階段的一部分進行處理的，所以@Input在構造函數中不可用。
export class MyMenuWidget {
constructor(private _elementRef: ElementRef){
...
}
ngOnInit() {}
}功能上的差異：
對於Angular建構子，主要用來初始化，和注入依賴關係。通常的做法是，盡可能少放邏輯到建構函式中，有時候，儘管你放了很多邏輯但不影響功能。
對於ngOnInit，Angular在建立元件的DOM，使用建構函式註入所有必須的依賴，完成初始化後呼叫ngOnInit，這是執行元件初始化邏輯的好地方。
簡單的說 ，constructor建構子本身是和Angular無關的，ngOnInit這些鉤子函式是Angular裡定義的。
現在是不是清楚為什麼@Input在建構子裡拿不到值的了吧。以後也清楚哪些邏輯放建構函式裡，哪些放ngOnInit裡了吧。
更多程式相關知識，請造訪：程式設計教學！ ！
以上是Angular開發問題記錄：元件拿不到@Input輸入屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
