Angular 之裝飾器@Input

Input

• 一個裝飾器，用來把某個類字段標記為輸入屬性，並提供配置元數據。
• 該輸入屬性會綁定到模板中的某個 DOM 屬性。當變更檢測時，Angular 會自動使用這個 DOM 屬性的值來更新此數據屬性。

用法

• 使用原始名稱作為可綁定屬性名，也是默認的

// This property is bound using its original name.
@Input() bankName: string;

• 自定義一個屬性值作為屬性名稱

@Input('account-id') id: string;

　　一般在組件中，不會直接使用Input標記的輸入屬性，可能會導致數據流問題和不必要的性能浪費。所以一般是在組件中自定義個屬性來深復制Input的輸入屬性，從而來使用這個組件內的自定義的屬性來處理數據邏輯。這樣就達到了‘低耦合’的目的。

　　這里還有別樣的一種寫法取代深復制這種方法，如下：

@Input()
get isRequested(): boolean { return this._isRequested; }
set isRequested(value: boolean) {
  // 當輸入屬性和當前的不一致時，處理一下的邏輯
  if (value !== this._isRequested) {
    this._isRequested = value;
  }
}
private _isRequested: boolean = false;

 

優點

• 當輸入屬性和當前的不一致時，才會處理內部組件的邏輯，減少了一些不必要的性能浪費
• 使用TypeScript的get方法，可以在方法里對輸入屬性做進一步的數據處理，like: vue中的computed方法。
• 取代深復制的方法。
• 當需要檢測某個屬性的變化而做出響應的時候，不需要用生命周期的ngOnChanges方法，減少不必要的性能浪費。