Angular - 使用组件选择器作为属性使tslint生气

Question

我正在尝试创建一个具有属性作为选择器的组件,如下所示:

@Component({
    selector: '[my-attribute-selector]',
    template: ``
})
export class MyComponent { 
   // Some cool stuff
}

然而,tslint抱怨这一点,并带有以下消息:

[tslint] The selector of the component "MyComponent" should be used as element

我知道我可以禁用该tslint规则,但我想知道在这样做之前是否有合理的原因我不应该使用属性作为组件的选择器.

提前致谢!

Answer 1

您的tslint.config文件将具有此规则

"component-selector": [
  "element",
  "app",
  "kebab-case"
],

请修改它以允许attribute选择器如下

"component-selector": [
  "attribute", 
  "myPrefix", 
  "camelCase"
]

Answer 2

要允许元素选择器和属性选择器都倾斜，请tslint.config传入数组["element", "attribute"]而不是"element"或"attribute"：

"component-selector": [
        true,
        ["element", "attribute"],
        "app",
        "kebab-case"
    ]

根据采用属性方法的原因，我将在codelyzer上引用此问题。基本上，当打算只包装低级本机输入功能（例如button，input不必<my-custom-input>在它们周围）时，建议这样做。

听过Angular Material团队在ng-conf中关于组件API设计的演讲之后，有一种情况是使用属性选择器作为组件，以使组件能够使用DOM API，而无需将自定义元素样式组件中的20多个绑定反映到包装的内部DOM API。