13
votes

La classe utilise des fonctionnalités angulaires mais n'est pas décorée. Veuillez ajouter un décorateur angulaire explicite

J'ai quelques composants comme CricketComponent , FootballComponent , TennisComponent etc. Toutes ces classes ont des propriétés communes: - TeamName, teamSize, players etc. qui sont @Input() .

Maintenant, j'ai créé une classe BaseComponent , défini toutes ces propriétés là-dedans et cette classe baseComponent sera étendue par cricket / football / tennis / etcComponents.

baseComponent.ts

@Component({
  selector: 'app-cricket',
  templateUrl: './cricket.component.html',
  styleUrls: ['./cricket.component.scss']
})
export class cricketComponent extends BaseComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit(): void {
  }

}

CricketComponent.ts

export class BaseComponent {

    @Input() TeamName: string;
    @Input() teamSize: number;
    @Input() players: any;

}

J'obtiens cette erreur:

ERREUR dans src / app / base-screen.ts: 4: 14 - erreur NG2007:

La classe utilise des fonctionnalités angulaires mais n'est pas décorée. Veuillez ajouter un décorateur angulaire explicite.

typescript angular

1 commentaires

Exporter la classe abstraite BaseComponent {@Input () TeamName: string; @Input () teamSize: nombre; @Input () joueurs: n'importe lequel; } - essayez d'ajouter un résumé

3 Réponses :

18
votes

Vous devrez ajouter un décorateur @Component à cette classe de base (qui devrait probablement également être déclarée abstract ).

C'est le strict minimum avec lequel vous pouvez vous en tirer:

@Component({
  template: ''
})
export abstract class BaseComponent {

    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

6 commentaires

J'ai fait la même chose avant de poser la question et l'erreur a été résolue. Mais est-il juste d'utiliser le modèle: 'EMPTYQUOTESHERE'.

Je veux dire, ça se sent comme un hack. BaseComponent n'est pas un composant angulaire. C'est juste une classe dactylographiée qui est étendue par d'autres COMPOSANTS ANGULAIRES.

Pouvez-vous confirmer cela?

Je sais que cela semble piraté, mais pour moi, c'est ainsi que je l'ai fait fonctionner dans Angular 9. Je ne suis pas au courant d'autres options pour le moment ... Peut-être qu'une Directive fonctionnerait ...

Je marque que cette réponse est correcte. Pendant ce temps, je fouille dans les Docs angulaires pour voir s'il peut y avoir une meilleure approche. Je vous encourage également à faire de même.

Merci pour l'encouragement, mais j'y ai passé 15 minutes, et c'est tout ce que je vais dépenser. Je travaille sur un prototype pour l'instant. Bonne chance dans votre recherche.

5
votes

Bien que la réponse acceptée soit correcte en utilisant @Component , un inconvénient mineur est que tous les types d'arguments de constructeur doivent être résolus par DI. Donc, si votre constructeur de classe de base prend une constante / littérale - disons, une énumération - comme indicateur, vous allez devoir configurer un fournisseur / jeton DI correspondant juste pour le faire compiler.

Vous pouvez cependant également résoudre NG2007 en utilisant le décorateur @Directive place, qui ne nécessite pas de compatibilité DI

2 commentaires

ng update add exact @Directive

Désolé @DimaV, pouvez-vous expliquer ce que cette ligne de commande est censée faire?

0
votes

Avec Angular 10, vous pouvez résoudre ce problème en ajoutant le décorateur @Injectable () à votre classe de base abstraite comme ceci:

@Injectable()
export abstract class BaseComponent {    
    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

0 commentaires