Angular - 使用组件选择器作为属性让 tslint 生气 [英] Angular - Using a component selector as an attribute makes tslint get angry

问题描述

我正在尝试使用属性作为选择器创建一个组件，如下所示:

I'm trying to create a component with an attribute as a selector, like this:

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

然而，tslint 对此表示不满，并显示以下消息:

However, tslint is complaining about that, with the following message:

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

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

I know I could just disable that tslint rule, but I'd like to know if there's a reasonable reason why I shouldn't use an attribute as the component's selector before doing so.

提前致谢！

推荐答案

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

To allow linting for both element and attribute selectors, in tslint.config pass in an array ["element", "attribute"] instead of "element" or just "attribute":

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

根据采用属性方法的原因，我将引用 codelyzer 上的这个问题.基本上，当打算只包装像 button 或 input 这样的低级本机输入功能而不必放置 时，这是可取的代码>围绕他们.

As per reasons of taking the attribute approach, I will quote from this issue on codelyzer. Basically it's advisable when intending to just wrap low-level native input functionality like button or input without having to put a <my-custom-input> around them.

在听完 Angular Material 团队在 ng-conf 中的演讲后组件 API 设计 有使用属性选择器作为组件允许组件无需使用 DOM API需要从自定义元素样式中反映 20 多个绑定组件到它包装的内部 DOM API.

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 生气的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！