Angular指令选择器与TSLint冲突，如何在不禁用规则下解决？

嘿，这个问题我之前也碰到过！其实是TSLint的directive-selector规则在起作用——它默认遵循Angular官方的最佳实践，更倾向于用属性选择器来定义属性指令，所以你用类选择器的时候就触发了报错。不用禁用规则的话，有两个靠谱的解决办法：

方法一：改用属性选择器（推荐） #

这是最符合Angular社区惯例的做法，也能直接满足TSLint的规则要求。你只需要把指令的选择器改成属性形式，记得加上项目的前缀（比如常见的app前缀），命名用短横线分隔或者驼峰式都可以（对应TSLint的配置）：

@Directive({
  selector: '[appInputField]' // 属性选择器格式，带项目前缀
})
// 你的指令类代码...

之后在模板里使用的时候，直接把这个属性加到元素上就行：

<input appInputField />
<!-- 如果需要绑定值的话 -->
<input [appInputField]="yourValue" />

方法二：调整TSLint配置，允许类选择器 #

如果你坚持要用类选择器，那可以修改TSLint的规则配置，让它允许类选择器的同时，保持命名规范。

找到项目根目录下的tslint.json文件，找到directive-selector这一项，把原来的attribute类型改成class，同时确保选择器符合前缀和命名格式要求：

比如原来的配置可能是：

"directive-selector": [true, "attribute", "app", "camelCase"]

修改成：

"directive-selector": [true, "class", "app", "kebab-case"]

然后你的指令选择器就要改成符合这个配置的格式（带前缀，短横线分隔）：

@Directive({
  selector: '.app-input-field' // 带项目前缀的类选择器
})
// 你的指令类代码...

这样TSLint就会认可你的类选择器，不会再报错啦。

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