angular指令选择器与tslint的冲突

Question

我正在使用 angular 4 指令来定义 angular 属性指令。但我想将此指令用作 class。我的定义是（它工作正常）：

@Directive({
  selector: '.input-field'
})

这是根据angular选择器定义（.class之一）

但是我得到如下 tslint 错误：

有没有办法在不禁用 tslint 规则的情况下修复此错误？

Answer 1

在这种情况下，您的规则会阻止您使用 class 选择器，因此您必须禁用它。问题是要不要全局禁用它？

您可以在这样的代码块中禁用特定规则：

/* tslint:disable: no-use-before-declare */

some code breaking no-use-before-declare rule

/* tslint:enable: no-use-before-declare */

或者您可以为下一行禁用整个 tslint

// tslint:disable-next-line
some code breaking all the rules
normal code

Answer 2

要在同一项目中验证多个前缀，您只需使用以下内容（在 tslint.json 文件中）：

...
"component-selector": [true, "element", ["app", "my-awsome-prefix", "another-prefix"], "kebab-case"],
...

指令也一样：

...
"directive-selector": [true, "attribute", ["app", "myDirectivePrefix"], "camelCase"],
...

Answer 3

我遇到了同样的错误并在 GitHub 上打开了一个问题。这是我得到的答案：

While Angular does support class selectors for directives, this feature should be used only in special circumstances because it makes it hard to understand which parts of the template are regular classes and which are directives. This is why this syntax is tslint warning and not a compilation error.

If you insist on using this selector style, you can change the tslint config, or prefix the callsite in the code with tslint ignore comment, but you'll make your life and other's life easier if you stick to attribute selectors instead.

这不是很令人满意，但似乎没有办法。

Answer 4

在我的例子中，问题是以下数组类型：

public dateFormats: Array<{ format: string, eq: string }> = [...];

不使用通用语法修复了错误。

我肯定会考虑从 tslint 迁移到 eslint，因为对 Angular CLI 的支持已停止。

angular指令选择器与tslint的冲突

The conflict between angular directive selector and tslint

tslint

angular2-directives

angular