angular2 Wie ändere ich das Standardpräfix der Komponente zu stoppen tslint Warnungen

Question

Es scheint, wenn ich eine Angular 2 App mit Angular cli erstellen. Mein Standardkomponentenpräfix ist app-root für AppComponent. Nun, wenn ich den Wähler auf etwas anderes ändern sagen "abc-root"

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

vscode warnt mich,

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

Answer 1

Sie benötigen zwei Dateien ändern tslint.json und .angular-cli.json Angenommen, Sie zu myprefix ändern wollen:

In der tslint.json Datei ändern nur die folgenden zwei Eigenschaften:

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

change "App" auf "myprefix"

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

Im .angular-cli.json Datei ändern nur das Attribut prefix:

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

change "app" zu "myprefix"

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

Wenn im Fall, dass Sie mehr als ein Präfix als @Salil Junior Punkt aus:

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

Answer 2

Eigentlich mit kantigem Cli, können Sie einfach den „prefix“ Tag ändern, in dem „Apps“ Array auf angular-cli.json, befindet sich in der Root-App.

Ändern für "TheBestPrefix", wie folgt.

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

Wenn Sie eine neue Komponente mit CLI generieren, ng g component mycomponent der Komponenten-Tag haben Sie die folgenden Namen "TheBestPrefix-mycomponent"

Answer 3

1. Passen Sie Ihren angular-cli.json: "Präfix": "DefaultPrefix", so dass Winkel cli Wille Verwenden Sie das zum Generieren von Komponenten.

2. Ajust tslint.json wie folgt aus:

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