Tengo algunos componentes como CricketComponent , FootballComponent , TennisComponent , etc. Todas estas clases tienen algunas propiedades comunes: TeamName, teamSize, players etc., que son @Input() .
Ahora creé una clase BaseComponent , definí todas estas propiedades allí y esta clase baseComponent se ampliará con cricket/football/tennis/etcComponents.
baseComponent.ts
export class BaseComponent { @Input() TeamName: string; @Input() teamSize: number; @Input() players: any; }CricketComponent.ts
@Component({ selector: 'app-cricket', templateUrl: './cricket.component.html', styleUrls: ['./cricket.component.scss'] }) export class cricketComponent extends BaseComponent implements OnInit { constructor() { super(); } ngOnInit(): void { } }Estoy recibiendo este error:
ERROR en src/app/base-screen.ts:4:14 - error NG2007:
La clase usa características angulares pero no está decorada. Agregue un decorador angular explícito.
Ver también: Falta la migración del decorador @Directive()/@Component()
Antes:
export class BaseComponent { @Input() TeamName: string; @Input() teamSize: number; @Input() players: any; }Después:
@Directive() export class BaseComponent { @Input() TeamName: string; @Input() teamSize: number; @Input() players: any; }Tuve una situación similar al ejecutar ng serve . Recibía ese error para las bibliotecas de terceros y para todos mis componentes Angular a pesar de que estaban decorados.
Si tiene este problema, consulte esta respuesta para Angular 11 'error NG2007: la clase está usando funciones de Angular pero no está decorada'. Pero la clase está decorada.
Desde Angular 10, puede solucionar este problema agregando el decorador @Injectable() a su clase base abstracta de esta manera:
@Injectable() export abstract class BaseComponent { @Input() teamName: string; @Input() teamSize: number; @Input() players: any; }Deberá agregar un decorador @Component a esa clase base (que probablemente también debería declararse abstract ).
Este es el mínimo con el que puede salirse con la suya en Angular 9:
@Component({ template: '' }) export abstract class BaseComponent { @Input() teamName: string; @Input() teamSize: number; @Input() players: any; }Para Angular 10+, vea esta respuesta .
Si bien la respuesta aceptada es correcta al usar @Component , una desventaja menor es que requiere que DI pueda resolver todos los tipos de argumentos del constructor. Entonces, si su constructor de clase base toma una constante/literal, por ejemplo, una enumeración, como indicador, tendrá que configurar un proveedor/token DI correspondiente solo para que se compile.
Sin embargo, también puede resolver NG2007 usando el decorador @Directive en su lugar, que no requiere compatibilidad DI
Para estos errores: NG6001: la clase 'XComponent' aparece en las declaraciones de NgModule 'AppModule', pero no es una directiva, un componente o una canalización. Elimínelo de las declaraciones de NgModule o agregue un decorador angular apropiado.
NG2003: No hay token de inyección adecuado para el parámetro 'A' de la clase 'Y'.
NG2007: la clase usa características angulares pero no está decorada. Agregue un decorador angular explícito.
Puede estar escribiendo la nueva clase entre la declaración @Component y la clase Component.
ex.
// exportar clase Y{ // }
@Component({ selector: 'app-X', templateUrl: './X.component.html', styleUrls: ['./X.component.css'] }) export class XComponent implements OnInit { todos : Y[] = [ new Y(1 ), new Y(2 ), new Y(3 ) ] constructor() { } ngOnInit(): void { } }//exportar clase Y{ //}
es decir, si tiene más de una clase. digamos clase XComponent y Clase Y, donde la clase Y se usa en la clase XComponent, luego escriba el código para la clase Y arriba de @Component({}) o debajo de la clase XComponent