angular2 วิธีเปลี่ยนส่วนนำหน้าเริ่มต้นของส่วนประกอบเพื่อหยุดคำเตือน tslint

ดูเหมือนว่าเมื่อฉันสร้างแอป Angular 2 โดยใช้ Angular cli คำนำหน้าส่วนประกอบเริ่มต้นของฉันคือ app-root สำหรับ AppComponent ตอนนี้เมื่อฉันเปลี่ยนตัวเลือกเป็นอย่างอื่นพูดว่า "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"

คุณต้องแก้ไขสองไฟล์ tslint.json และ. triangle-cli.json สมมติว่าคุณต้องการเปลี่ยนเป็นmyprefix :

ในไฟล์ tslint.json เพียงแก้ไขแอตทริบิวต์ 2 ต่อไปนี้:

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

เปลี่ยน "แอพ" เป็น "myprefix"

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

ในไฟล์ angular.json เพียงแก้ไขคำนำหน้าแอตทริบิวต์: (สำหรับรุ่นเชิงมุมน้อยกว่า 6 ชื่อไฟล์คือ. triangle-cli.json)

"app": [
  ...
  "prefix": "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: "คำนำหน้า": "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ซึ่งตั้งอยู่บนแอปรูท

เปลี่ยนเป็น "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"
        ]
    }
}

การเปลี่ยนไฟล์นั้นจะช่วยแก้ไขปัญหาได้

ขอบคุณ @Aniruddha ชี้ให้เห็นการเปลี่ยนแปลงในเชิงมุม 7:

สร้าง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"
    ]
  }
}

สิ่งหนึ่ง - หากใน app.component.spec คุณจำลองส่วนประกอบจากโมดูลที่ใช้ร่วมกันมันจะบ่นว่าตัวเลือก mocks ของคุณเริ่มต้นด้วย 'แชร์' แทนที่จะเริ่มด้วย 'แอป' ฉันคิดว่าเหมาะสม - ฉันควรสร้าง mocks ของฉันในโมดูลจากที่พวกเขามา

tslint.json

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

'เคบับตัวเล็ก' บังคับให้ตัวเลือกส่วนประกอบใด ๆ อยู่ในเคสนี้ '-'

ตัวอย่างเช่นคุณสามารถมีตัวเลือกเช่น ' แอปทดสอบ ', ' แอปของฉัน ' เช่นนี้

และเท่าที่เกี่ยวกับข้อผิดพลาดของคุณคุณต้องเริ่มตัวเลือกส่วนประกอบด้วย 'แอป' ตามที่ฉันได้กล่าวถึงในตัวอย่าง

ฉันไม่คิดว่าคุณควรทำการเปลี่ยนแปลงใด ๆ ใน tslint.json แม้ว่ามันจะแก้ไขปัญหาของคุณได้ แต่มันก็ไม่ใช่วิธีที่ดีในการเปลี่ยนเป็น tslint

ขอบคุณ