角度 2 选择器中的 kebab-case (tslint)答案

【问题标题】：kebab-case in angular 2 selectors (tslint)角度 2 选择器中的 kebab-case (tslint)
【发布时间】：2017-06-03 14:04:24
【问题描述】：

这是我的tslint.json 文件：

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": false,
    "indent": [
      true,
      "spaces"
    ],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-inferrable-types": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": false,
    "no-unused-expression": true,
    "no-unused-variable": true,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],

    "directive-selector-prefix": [false, "app"],
    "component-selector-prefix": [false, "app"],
    "directive-selector-name": [true, "camelCase"],
    "component-selector-name": [false, "kebab-case"],
    "directive-selector-type": [true, "attribute"],
    "component-selector-type": [true, "element"],
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}

我已将组件选择器名称设置为 kebab-case。当我运行 lint 时，我的组件中出现一堆错误，说...组件“AdminComponent”的选择器应该命名为 kebab-case。

但是当我转到组件定义时，它是这样的：

@Component({
    selector: 'admin',
    templateUrl: 'admin.component.html',
    styleUrls: ['admin.component.css'],
    providers: []
})

选择器只有一个词，不需要 kebab-case 选择器...我该如何解决这个问题？

【问题讨论】：

我刚刚遇到了类似的问题并解决了like this。希望对你有帮助

标签： angular jslint tslint

【解决方案1】：

不知道如何防止出现此警告，但关于官方 Angular 样式指南，您应该使用自己的前缀作为选择器名称：

https://angular.io/styleguide#02-07

请为组件选择器使用自定义前缀。例如，前缀 toh 代表英雄之旅，前缀 admin 代表管理功能区。

为什么？防止元素名称与其他应用中的组件和原生 HTML 元素发生冲突。

【讨论】：