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方法，减少不必要的性能浪费。