避免错误'组件的选择器应该命名为kebab-case并包含dash'

Question

如果我不想重命名选择器，我怎么能避免错误'组件的选择器应该命名为kebab-case并在Angular2中包含dash'？有没有解决方法？..

Answer 1

尝试

import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";

@NgModule({
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

Answer 2

TSLint使用codelyzer插件生成此错误。这为选择器强制执行A​​ngular样式指南：https://angular.io/guide/styleguide#component-selectors

与大多数linting错误一样，有一些方法可以配置或忽略它们。一定要慎重考虑如何以及何时忽略掉色错误。根据您的具体情况，您可能希望以不同方式处理此错误：

• 如果所有组件都有此错误并且具有匹配的选择器，则可以更改TSLint用于检查TSLint.json文件中的错误的规则：

  {
    "rules": {
      // The rules component-selector and directive-selector have the following arguments:
      // [ENABLED, "attribute" | "element", "prefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"]
      "component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"],
      "directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"],
      ...
    }
  }

  见https://github.com/mgechev/codelyzer#recommended-configuration 您还可以配置CLI以在angular.json文件的底部生成具有正确前缀的组件和指令：

  {
    "schematics": {
      "@schematics/angular:component": {
        "inlineStyle": false,
        "inlineTemplate": false,
        "prefix": "myCustomPrefix",
        "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "myCustomPrefix"
    }
  }

• 如果您有一个一次性组件或指令，您希望从检查中排除TSLint，您可以使用抑制注释： // tslint:disable-next-line:component-selector
• 如果您想完全禁用此检查，可以在tslint.json中执行此操作：

  {
    "rules": {
      "directive-selector": false,
      "component-selector": false,
      ...
    }
  }