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"

あなたがに変更したいとし、2つのファイル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ファイルで、属性プレフィックスを変更するだけです （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

1. angular-cli.json： "prefix"： "defaultPrefix"を調整して、angular-cliがコンポーネントの生成に使用するようにします。

2. Ajust tslint.jsonこのように：

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

実際、Angular Cliを使用angular-cli.jsonすると、ルートアプリにあるの「apps」配列内の「prefix」タグを変更できます。

このように "TheBestPrefix"に変更します。

"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"

angular 6/7以降があるでしょうtslint.json、あなたの内側に/src保持しているフォルダtslistコンポーネントとディレクティブのルールを。

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

そのファイルを変更すると、問題が修正されます。

角度7の変更を指摘している@Aniruddhaに感謝します。

を作成tslint.jsonしsrc/app/sharedて拡張しapp/tslint.jsonます：

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

1つのこと-app.component.specで共有モジュールのコンポーネントをモック化すると、モックセレクターが「app」ではなく「shared」で始まるというメッセージが表示されます。私はそれが理にかなっていると思います-私はモックをモジュールから作成しなければなりません。

tslint.json

"component-selector"：[true、 "element"、 "app"、 "kebab-case"]

この「ケバブケース」は、コンポーネントセレクターをこの「-」ケースに強制します。

たとえば、 ' app-test '、 ' app-my 'のようなセレクターをこのように持つことができます。

そして、あなたのエラーに関する限り、例で述べたように「app」でコンポーネントセレクターを開始する必要があります。

tslint.jsonを変更する必要はないと思いますが、問題は解決しますが、tslintを変更することはお勧めしません。

ありがとう