Angular2如何更改组件的默认前缀以停止 tslint 警告

看起来，当我使用 Angular cli 创建一个 Angular 2应用程序时。我的默认组件前缀是 AppComponent 的 app-root。现在，当我将选择器更改为其他内容时，请输入“ abc-root”

@Component({
selector: 'abc-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

Vscode 警告我,

[tslint] The selector of the component "AppComponent" should have prefix "app"
87990 次浏览
小开
最佳答案

您需要修改两个文件 tslint.json 和. angle-cli. json，假设您想更改为 我的前缀:

在 tslint.json 文件中，只需修改以下两个属性:

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

把“ app”改成“ myprefix”

"directive-selector": [true, "attribute", "myprefix", "camelCase"],
"component-selector": [true, "element", "myprefix", "kebab-case"],

在 angular.json 文件中，只需修改属性前缀: (对于 angle 版本小于6的文件，文件名为. angle-cli. json)

"app": [
...
"prefix": "app",
...

把“ app”改成“ myprefix”

"app": [
...
"prefix": "myprefix",
...

如果在这种情况下，你需要一个以上的前缀作为 @ Salil Junior指出:

"component-selector": [true, "element", ["myprefix1", "myprefix2"], "kebab-case"],

如果使用 Angular cli 创建新项目，请使用此命令行选项

ng new project-name --prefix myprefix
小开

事实上，使用 Angular Cli，你只需要改变位于根应用程序 angular-cli.json上的“ apps”数组中的“ prefix”标签。

像这样换“最佳前缀”。

"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "TheBestPrefix",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]

使用 CLI 生成新组件时，ng g component mycomponent 组件标记将具有以下名称 "TheBestPrefix-mycomponent"

小开
  1. 调整您的 angular-cli.json: “ prefix”: “ defaultPrefix”，以便 angle-cli 将使用它来生成组件。

  2. 像这样调整 tslint.json:

    "directive-selector": [
true,
"attribute",
["prefix1", "prefix2", "prefix3"],
"camelCase"
],
"component-selector": [
true,
"element",
["prefix1", "prefix2", "prefix3"],
"kebab-case"
],
小开

Tslint Json

“ Component-selector”: [ true，“ element”，“ app”，“ kebab-case”]

这个“ kebab-case”强制任何组件选择器使用这个“-”大小写。

例如 你可以有像‘ 应用程序测试’，‘ App-my’这样的选择器。

至于你的错误关注，你必须开始与’应用程序’组件选择器，我刚才提到的例子。

我认为您不应该对 tslint.json 进行任何更改，虽然它会解决您的问题，但是在 tslint 中进行更改并不是一个好的实践。

谢谢

小开

从 angular 6/7开始，在 /src文件夹中将有一个 tslint.json，其中包含组件和指令的 tslist规则。

{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"directivePrefix",
"camelCase"
],
"component-selector": [
true,
"element",
"compoenent-prefix",
"kebab-case"
]
}
}

在该文件中进行更改将解决这个问题。

小开

感谢@Aniruddha 指出了角度7的变化:

在 src/app/shared中创建 tslint.json以扩展 app/tslint.json:

{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"shared",
"camelCase"
],
"component-selector": [
true,
"element",
"shared",
"kebab-case"
]
}
}

有一件事——如果在 app.Component ent.spec 中模拟来自共享模块的组件，它会抱怨您的模拟选择器以“ share”开始，而不是以“ app”开始。我想这是有道理的——我应该在模块中创建我的模拟。

小开

角度13:

如果您使用 ng lint来预先初始化整理过程:

您有一个预生成的 .eslintrc.json文件。

在这个文件中，提到了前缀，只需将其更改为数组即可。

这里我们添加“ mynewprefix”作为 lint 的有效前缀:

"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": ["app", "mynewprefix"],
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": ["app", "mynewprefix"],
"style": "kebab-case"
}
]
}

提交答案