Héritage de composants en angulaire: un moyen simple de résoudre l'injection de dépendances

Donc, le vrai problème: parfois nous avons beaucoup de composants similaires dans un projet, avec la même logique, la même DI, les mêmes propriétés, etc., et la pensée se pose: pourquoi ne pas mettre le tout dans un composant de base (ou plutôt une directive ) avec une classe abstraite, et le reste des composants héritent déjà? En fait, la pensée est bonne, le principe DRY est respecté, nous avons une source de vérité, en changeant cette même logique générale, vous n'aurez pas à sauter par-dessus tous les composants, etc.

Mais il y a une mise en garde: ces malheureux designers. Il est nécessaire dans chaque composant hérité de transmettre toutes les DI au constructeur du parent.

constructor ( 
	customService: CustomService, 
	additionalService: AdditionalService
) {
		super(customService, additionalService)
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ne semble pas très bon, mais ce n'est pas mal Le problème est que si nous ajoutons DI dans la classe de base, nous devrons sauter par-dessus tous les composants hérités et ajouter cette dépendance au constructeur. Notre DRY pleurait :-))

Essayons de le faire différemment: avec le composant de base, nous allons créer une classe Injectable, dans laquelle nous envelopperons toutes les dépendances. Et injectez-le dans la classe de base

@Injectable()
export class MyBaseComponentDependences {
		constructor(
    	public customService: CustomService,
      public additionalService: AdditionalService
      ) {}    
}
@Directive()
export abstract class MyBaseComponent<T> {

		//     
		shareEntity = this.deps.additionalService.getShare()
    
		protected constructor(
    	public deps: MyBaseComponentDependences
     ) {}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

La classe héritée ressemblera à ceci

@Component({providers: [MyBaseComponentDependences] })
export class MyChildComponent extends MyBaseComponent<MyDto> {
		
    //    -
    customEntity = this.deps.customService.getEntity()
    
    constructor(deps: MyBaseComponentDependences) {
    	super(deps);
     }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Maintenant, si nous ajoutons DI à la classe de base, nous ne changeons que la classe MyBaseComponentDependences, tout le reste reste tel quel. Problème résolu

PS: cependant, je pense que l'héritage des composants dans Angular ne devrait être utilisé que lorsque cela est vraiment nécessaire, et il n'est pas possible ou conseillé de transférer la logique générale vers des services, des classes séparées ou des directives d'attributs.