Angular 5使用类组件选择器触发tslint错误的解决咨询

1. 如何让component-selector规则接受li.my-component这种选择器？ #

当然可以配置！component-selector规则（通常来自codelyzer包，是Angular项目TSLint的标配规则）支持调整参数来兼容这种复合选择器。

你的选择器li.my-component属于元素标签+类选择器的组合，核心是规则需要允许类选择器部分，同时允许搭配元素标签使用。你可以在项目根目录的tslint.json中修改规则配置：

"component-selector": [
  true,
  "class", // 指定规则检查类选择器的部分（即`.my-component`）
  "my",    // 类选择器的前缀，对应你的`.my-component`中的`my-`
  {
    "allowElement": true // 开启允许选择器中包含元素标签（比如`li`）
  }
]

如果你的类选择器没有固定前缀，也可以添加"requirePrefix": false来禁用前缀校验（不过从项目风格统一的角度，还是推荐保留前缀）：

"component-selector": [
  true,
  "class",
  "",
  {
    "allowElement": true,
    "requirePrefix": false
  }
]

配置完成后，TSLint就不会再对li.my-component这种选择器抛出错误了。

2. 自定义TSLint规则的配置文档在哪里？ #

首先要说明，TSLint已经被官方弃用，现在Angular项目更推荐使用ESLint + @angular-eslint，但针对TSLint的规则配置：

• 对于官方提供的规则（比如codelyzer里的规则），你可以直接查看项目node_modules目录下对应包的源码或README文件。每个规则的定义文件里都会有metadata属性，详细说明了该规则支持的配置参数、默认值和使用说明。比如codelyzer的component-selector规则源码里就明确列出了allowElement、requirePrefix这些可选配置。
• 如果你要编写自定义TSLint规则，配置项的定义是在规则类的metadata属性中声明的。你可以参考TSLint核心规则的写法，通过RuleMetadata来定义规则接受的参数类型、默认值和描述，之后就能在tslint.json中传入对应的配置了。

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