角度2选择器中的烤肉串盒(tslint) [英] kebab-case in angular 2 selectors (tslint)

问题描述

这是我的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.

I've got component selector name set to kebab-case. When I run a lint, I get a bunch of errors in my components saying that... The selector of the component "AdminComponent" should be named kebab-case.

但是当我转到组件定义时，就是这样:

But when I go to the component definition, this is what it is:

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

选择器只有一个单词，不需要烤肉串选择器...我该如何解决?

The selector is only one word, and doesn't require a kebab-case selector... how can I fix this?

推荐答案

不知道如何防止此警告，但是对于正式的Angular Styleguide，您应该使用自己的前缀作为选择器名称:

Don't know how to prevent this warning, but regarding to the official Angular Styleguide you should use your own prefix for a selector name:

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

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

Do use a custom prefix for a component selector. For example, the prefix toh represents from Tour of Heroes and the prefix admin represents an admin feature area.

为什么?防止元素名称与其他应用程序中的组件以及本机HTML元素发生冲突.

Why? Prevents element name collisions with components in other apps and with native HTML elements.

这篇关于角度2选择器中的烤肉串盒(tslint)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！