如何禁用 Angular 样式指南的 tslint 规则：“选择器应以 <prefix> 为前缀”？答案

【问题标题】：How to disable tslint rule for Angular style guide: "The selector should be prefixed by <prefix>"?如何禁用 Angular 样式指南的 tslint 规则：“选择器应以 <prefix> 为前缀”？
【发布时间】：2019-10-28 11:33:27
【问题描述】：

我对某些组件进行了 Angular 测试，该组件使用来自 ng-bootstrap 的指令 ngb-pagination。

现在，在我的测试中，我将这个组件模拟如下：

// on next line I get: The selector should be prefixed by "<prefix>" (https://angular.io/guide/styleguide#style-02-07) (component-selector)
@Component({ template: ``, selector: 'ngb-pagination' })
class DummyNgPagination {
    // some data here, not relevant in to the question
}

在放置@Component 注释的行中，我得到一个指向Style 02-07 的tslint 错误。

我尝试通过执行以下操作来禁用规则，但结果是一样的。

// tslint:disable-next-line:directive-selector
@Component({ template: ``, selector: 'ngb-pagination' })

如何禁用该特定行的规则？

PS：

这是真正的angular project，以防您想检查任何资源配置。
有一个类似的问题 (kebab-case in angular 2 selectors (tslint))，但 OP 只是决定接受它。

【问题讨论】：

标签： angular tslint codelyzer

【解决方案1】：

directive-selector 规则适用于 @Directive 装饰器。

对于@Component，您需要使用component-selector

例如：

// tslint:disable-next-line:component-selector
@Component({ template: ``, selector: 'ngb-pagination' })

【讨论】：

圣诞快乐！！！！很好的例子。

【解决方案2】：

您可以在 angular.json 文件中的 scematics 条目中设置它，如下所示：

您可以为组件和指令设置它

"schematics": {
    "@schematics/angular:component": {
      "prefix": ""
    },
    "@schematics/angular:directive": {
      "prefix": ""
    }
}

如果您使用命令行并且不经常生成组件/指令，则可以使用命令行执行此操作，如下所示：

ng generate component my-component --prefix ""

【讨论】：