24-3 Classe BaseComponent pour propriétés réutilisées

Peut-être vous êtes-vous dit que d'ajouter une propriété msgErreur dans chaque composante serait fastidieux, en plus de représenter de la duplication de code. De plus, un oubli est facile.

Nous pouvons créer une classe BaseComponent possédant les propriétés communes telles msgErreur, nous évitant d'ajouter cette dernière à tous les composants.

1. Créer manuellement un fichier TypeScript base-component.ts sous src/app/shared/components.
2. Définissez une classe abstraite BaseComponent

src/app/components/base-component.ts

export abstract class BaseComponent {
  
}

info

Une classe abstraite est une classe qui ne peut être instanciée en objet. Elle peut tout de même avoir des propriétés et des fonctions, en faisant un outil parfait pour l'héritage.

3. Ajoutez une propriété msgErreur à la classe

src/app/components/base-component.ts

export abstract class BaseComponent {
  msgErreur?: string;
}

4. Faites hériter les composants ayant besoin de gérer les erreurs de BaseComponent
   src/app/features/projets/pages/projets-index.ts

   export class ProjetsIndex extends BaseComponent implements OnInit {
     protected projets: Projet[] | null = null

5. Assurez-vous de supprimer la propriété msgErreur, si présente dans la composante enfant héritant de BaseComponent, sinon vous aurez une erreur comme quoi cette propriété est déjà définie.
   src/app/features/projets/pages/projets-index.ts

   export class ProjetsIndex extends BaseComponent implements OnInit {
     protected projets: Projet[] | null = null
     protected msgErreur?: string;

6. Finalement, faites appel à super(). Une classe héritant d'une autre doit faire appel, via son constructeur, au constructeur de la classe parente via super().
   src/app/features/projets/pages/projets-index.ts

   export class ProjetsIndex extends BaseComponent implements OnInit {
     protected projets: Projet[] | null = null
   
     constructor(private projetService: ProjetService) {
       super();
     }

Voilà, vous pouvez continuer de faire appel à msgErreur, mais cette propriété est maintenant contenue dans BaseComponent plutôt que dans le composant spécifique (ProjetIndexPage ici).