时间戳

首页 > 解决方案 > 绑定到 @Input 别名，其中指令为 kebab-case

javascript - 绑定到 @Input 别名，其中指令为 kebab-case

问题描述

我试图在我的指令中使用 kebab-case 并使用 camelCase 作为我的别名。就像是

我的组件.html

<my-component [my-input]='myParentInput'></my-component>

我的-html-component.ts

export MyComponent {
  @Input('my-input') myInput;
}

这有效，但在 linting 时抛出错误

错误在 MyComponent 类中，指令输入属性myInput不应重命名 @angular-eslint/no-input-rename

在研究中，我遇到了这个讨论Angular: Bind to an @Input alias。通常不鼓励使用混叠的原因

避免输入和输出别名，除非它用于重要目的。 为什么？同一财产的两个名称（一个私有，一个公共）本质上是混乱的。

上述原因将不适用，因为不会创建名称为“my-input”的属性

现在在上述方法中，我可以使用以下方法并避免错误

我的组件.html

<my-component [myInput]='myParentInput'></my-component>

我的-html-component.ts

export MyComponent {
  @Input myInput;
}

我不想使用这种方法，个人偏好（Vue背景）。所以我有一个选项可以禁用https://stackoverflow.com/a/44033976/13680115中所述的警告

这种方法的问题是它会从我的项目中完全禁用规则，如果我要禁用特定的行，我最终会得到相当多的禁用

有没有一种方法可以禁用 kebab-case @Input 指令的规则，同时为 camelCase @Inputs 抛出错误？

标签： javascriptangulartypescripteslint

解决方案

推荐阅读