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

Question

看来，当我使用 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"

Answer 1

你需要修改两个文件tslint.json和.angular-cli.json，假设你想改成myprefix:

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

"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文件中只修改属性前缀:(angular 6以下版本，文件名为.angular-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