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

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

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

根据采用属性方法的原因，我将引用 this issue on codelyzer .基本上，建议只包装低级 native 输入功能，如 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.