Angular開發問題記錄：元件拿不到@Input輸入屬性

最近在工作中實現一個feature的時候，碰到一個小問題：元件拿不到@Input輸入屬性的問題，儘管對這些問題都比較瞭解，但是找問題是需要一個過程的，所以還是把這個問題總結記錄了下。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

【相關教學推薦：《》】

我需要給一個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輸入屬性的詳細內容，更多請關注TW511.COM其它相關文章！