角度:绑定到@Input别名

Question

我正在尝试在此示例之后的指令中设置输入别名

  @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;

<</div> div class="one_answers">您应该

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

Answer 3

使用新的 Angular 版本，tslint 消失了，我们需要使用 eslint .对于 Eslint，您需要修改.eslintrc.json文件中的rules并添加"@angular-eslint/no-input-rename"，如下所示。

例：

"rules": {
        // ..... some rules
        "@angular-eslint/no-input-rename": [
          "warn",
          { 
            "allowedNames": ["name"]
          }
        ],
       //.... more rules
     }

Answer 4

正确的方法应该是：

@Input() appAvatarColor: string;