Angular

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

为了允许对元素和属性选择器进行 linting，在 tslint.config 中传入一个数组 ["element", "attribute"] 而不是 "element" 或者只是 "attribute":

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

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

After listening to Angular Material team's talk in ng-conf about component API designs there is a case for using attribute selectors as components to allow components to be able to use the DOM API without needing to reflect 20+ bindings from the custom element style components to the inner DOM API it wraps.

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

Angular - Using a component selector as an attribute makes tslint get angry

tslint