Angular @Component装饰器中inputs属性的作用与使用疑问

你观察得没错，@Component装饰器里的inputs数组和@Input()装饰器其实是定义组件输入属性的两种等价方式，并非互为补充的关系。

Angular Material Button会用这种写法，主要有几个原因：

• 历史风格与团队规范：Angular早期版本（比如Angular 2刚推出阶段），很多开发者更习惯在组件装饰器中集中配置输入、输出属性，Angular Material作为官方维护的老牌库，部分代码保留了这类写法，或者团队统一采用了这种集中配置的风格。
• 批量管理输入属性：如果组件有大量输入属性，用inputs数组可以把所有输入声明集中放在一处，结构上更规整，方便统一查看和管理。
• 别名统一配置：如果需要给输入属性设置别名，在inputs数组里可以写成['属性名:别名']的格式，和@Input('别名') 属性名的效果完全一致，集中配置的话更便于管理所有别名映射。

举个简单的等价写法对比：

用@Input()装饰器的写法 #

@Component({
  selector: 'mat-button',
  template: '<button>{{text}}</button>'
})
export class MatButton {
  @Input() text: string;
  @Input('disabled') isDisabled: boolean;
}

用inputs数组的写法 #

@Component({
  selector: 'mat-button',
  template: '<button>{{text}}</button>',
  inputs: ['text', 'isDisabled:disabled']
})
export class MatButton {
  text: string;
  isDisabled: boolean;
}

需要说明的是，Angular官方现在更推荐使用@Input()装饰器的写法——因为它把属性定义和输入声明放在一起，可读性更强，也更符合现代Angular的开发习惯，所以日常业务开发中很少见到inputs数组的用法，但这两种方式都是Angular官方完全支持的合法写法。

内容的提问来源于stack exchange，提问作者Ole