Angular：绑定到@Input别名

Question

我正在尝试在此example

之后的指令中设置输入别名

  @Input('appAvatarColor') name: string;

该程序正在运行，但我收到TS Lint的警告

  

不应重命名指令输入属性

指令选择器是这个

@Directive({
  selector: '[appAvatarColor]'
})

我做错了吗？

Answer 1

您可以在tslint.json

中关闭规则

"no-input-rename": false

或禁用仅检查特定行的检查：

// tslint:disable-next-line:no-input-rename
@Input('appAvatarColor') name: string;

  

我的问题是，为什么默认情况下这被视为不良做法？

• 同一财产的两个名称（一个私人，一个公共）本质上令人困惑。

• 当指令名称也是输入属性时，您应该使用别名，并且指令名称不描述该属性。

来自https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-13

Answer 2

您可以通过以下方式实施：

@Input() appAvatarColor: string;

Answer 3

您应将@Input('appAvatarColor') name: string;重命名为其他名称，以使其与指令名称不同。您可以执行@Input('avatarColor') name: string;，然后通过@Input() avatarColor: string;

对其进行简化

Answer 4

正确的做法应该是：

@Input() appAvatarColor: string;