otro - pasar parametros entre componentes angular 4

angular2 cómo cambiar el prefijo predeterminado del componente para detener las advertencias de tslint

Question

Parece que cuando creo una aplicación Angular 2 usando Angular cli. Mi prefijo de componente predeterminado es raíz de la aplicación para AppComponent. Ahora, cuando cambio el selector a otra cosa, diga "abc-root"

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

vscode me advierte

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

Answer 1

1. Ajuste su angular-cli.json : "prefix": "defaultPrefix" para que angular-cli lo use para generar componentes.

2. Ajust tslint.json así:

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

Answer 2

Debe modificar dos archivos tslint.json y .angular-cli.json, suponga que desea cambiar a myprefix :

En el archivo tslint.json solo modifique los siguientes 2 atributos:

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

cambiar "aplicación" a "myprefix"

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

En el archivo angular.json solo modifique el prefijo de atributo: (Para la versión angular menor que 6, el nombre del archivo es .angular-cli.json)

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

cambiar "aplicación" a "myprefix"

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

Si en el caso necesita más de un prefijo como @Salil Junior señala:

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

Si crea un nuevo proyecto usando Angular cli, use esta opción de línea de comando

ng new project-name --prefix myprefix

Answer 3

En realidad, con Angular Cli, puede cambiar la etiqueta "prefijo", dentro de la matriz "apps" en su angular-cli.json , ubicada en la aplicación raíz.

Cambiando por "TheBestPrefix", así.

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

Cuando genera un nuevo componente usando CLI, ng g component mycomponent la etiqueta del componente tendrá el siguiente nombre "TheBestPrefix-mycomponent"

Answer 4

Gracias a @Aniruddha señalando los cambios en angular 7:

cree tslint.json en src/app/shared para extender la app/tslint.json :

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

Una cosa: si en app.component.spec se burla de un componente del módulo compartido, se quejará de que su selector de simulación comienza con ''compartido'' en lugar de comenzar con ''aplicación''. Supongo que eso tiene sentido: debería crear mis simulacros en el módulo de donde vinieron.

Answer 5

Mi solución (usando Angular 7) fue agregar esta línea 1 a la sección del selector de componentes en el archivo tslint.json

"prefijo-componente",

Answer 6

Para angular 6/7 adelante, habrá un tslint.json dentro de su carpeta /src que contiene las reglas tslist para sus componentes y directivas.

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

Cambiar en ese archivo solucionará el problema.

Answer 7

Para las últimas versiones del archivo Angular CLI, angular-cli.json fue renombrado como angular.json. Todo lo demás es lo mismo.

Answer 8

tslint.json

"selector de componentes": [verdadero, "elemento", "aplicación", "caso kebab"]

este ''caso kebab'' obliga a cualquier selector de componentes a estar con este caso ''-''.

por ejemplo , puede tener un selector como '' app-test '', '' app-my '' como este.

Y en lo que respecta a su error, debe iniciar el selector de componentes con ''aplicación'' como acabo de mencionar en el ejemplo.

No creo que deba hacer ningún cambio en tslint.json, aunque resolvería su problema, pero no es una buena práctica cambiar en tslint.

Gracias