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

您的"component-selector": [ "element", "app", "kebab-case" ], 文件将具有此规则

attribute

请修改它以允许"component-selector": [ "attribute", "myPrefix", "camelCase" ] 选择器如下

/Applications/Firefox.app/Contents/MacOS/firefox --help

Answer 2

要允许对和元素和属性选择器进行修改，请在tslint.config中传递数组["element", "attribute"]而不是"element"或仅传递"attribute"：

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

根据采用属性方法的原因，我将引用this issue on codelyzer。基本上，当打算仅包装button或input之类的低级本机输入功能而不必在它们周围放上<my-custom-input>时，建议这样做。

  

在听了Angular Material team's talk in ng-conf about component API designs之后，有时需要使用属性选择器作为   组件，使组件无需使用DOM API   需要从自定义元素样式反映20多个绑定   组件包装到内部DOM API中。