angular2 làm thế nào để thay đổi tiền tố mặc định của thành phần để dừng cảnh báo tslint

Có vẻ như, khi tôi tạo một ứng dụng Angular 2 bằng cách sử dụng Angular cli. Tiền tố thành phần mặc định của tôi là root ứng dụng cho AppComponent. Bây giờ, khi tôi thay đổi bộ chọn thành một cái gì đó khác nói "abc-root"

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

vscode cảnh báo tôi,

[tslint] The selector of the component "AppComponent" should have prefix "app"

Bạn cần sửa đổi hai tệp tslint.json và .angular-cli.json, giả sử bạn muốn thay đổi thành myprefix :

Trong tệp tslint.json chỉ cần sửa đổi 2 thuộc tính sau:

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

thay đổi "ứng dụng" thành "myprefix"

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

Trong tệp angular.json chỉ cần sửa đổi tiền tố thuộc tính: (Đối với phiên bản góc nhỏ hơn 6, tên tệp là .angular-cli.json)

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

thay đổi "ứng dụng" thành "myprefix"

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

Nếu trong trường hợp bạn cần nhiều hơn một tiền tố như @Salil Junior chỉ ra:

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

Nếu tạo một dự án mới bằng Angular cli, hãy sử dụng tùy chọn dòng lệnh này

ng new project-name --prefix myprefix

1. Điều chỉnh angular-cli.json: "tiền tố": "defaultPrefix" để angular-cli sẽ sử dụng điều đó để tạo các thành phần.

2. Bất công tslint.jsonnhư thế này:

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

Trên thực tế, với Angular Cli, bạn chỉ có thể thay đổi thẻ "tiền tố", bên trong mảng "ứng dụng" trên của bạn angular-cli.json, nằm trên ứng dụng gốc.

Thay đổi cho "TheBestPrefix", như thế này.

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

Khi bạn tạo một thành phần mới bằng CLI, ng g component mycomponent thẻ thành phần sẽ có tên sau"TheBestPrefix-mycomponent"

Đối với angular 6/7trở đi sẽ có một tslint.jsonbên trong /srcthư mục của bạn chứa các tslistquy tắc cho thành phần và chỉ thị của bạn.

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

Thay đổi trong tập tin đó sẽ khắc phục vấn đề.

Cảm ơn @Aniruddha chỉ ra những thay đổi trong góc 7:

tạo tslint.jsontrong src/app/sharedđể mở rộng app/tslint.json:

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

Một điều - Nếu trong app.component.spec bạn giả định một thành phần từ mô-đun được chia sẻ, nó sẽ phàn nàn rằng bộ chọn giả của bạn bắt đầu bằng 'chia sẻ' thay vì bắt đầu bằng 'ứng dụng'. Tôi cho rằng điều đó có ý nghĩa - tôi nên tạo ra các mô phỏng của mình trong mô-đun từ khi chúng đến.

tslint.json

"bộ chọn thành phần": [true, "phần tử", "ứng dụng", "kebab-case"]

'trường hợp kebab' này buộc bất kỳ bộ chọn thành phần nào phải ở trong trường hợp '-' này.

ví dụ: bạn có thể có bộ chọn như ' kiểm tra ứng dụng ', ' ứng dụng của tôi ' như thế này.

Và theo như lỗi của bạn, bạn phải bắt đầu bộ chọn thành phần với 'ứng dụng' như tôi vừa đề cập trong ví dụ.

Tôi không nghĩ bạn nên thực hiện bất kỳ thay đổi nào trong tslint.json, mặc dù điều đó sẽ giải quyết vấn đề của bạn, nhưng thực tế không tốt khi thay đổi trong tslint.

Cảm ơn