Herencia de componentes en Angular: una forma fácil de resolver la inyección de dependencia

Entonces, el problema real: a veces tenemos muchos componentes similares en un proyecto, con la misma lógica, la misma DI, propiedades, etc., y surge la idea: ¿por qué no poner todo en un componente base (o más bien una directiva ) con una clase abstracta, y el resto de los componentes ya son heredados? De hecho, el pensamiento es bueno, se observa el principio DRY, tenemos una fuente de verdad, al cambiar esa misma lógica general, no tendrás que saltar por encima de todos los componentes, etc.





Pero hay una advertencia: estos desafortunados diseñadores. Es necesario en cada componente heredado pasar todos los DI al constructor del padre.





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



no se ve muy bien, pero tampoco está mal. El problema es que si agregamos DI en la clase base, tendremos que saltar sobre todos los componentes heredados y agregar esta dependencia al constructor. Nuestro DRY estaba llorando :-))





Intentemos hacerlo de otra manera: junto con el componente base, crearemos una clase Injectable, donde envolveremos todas las dependencias. E inyectarlo en la clase 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 clase heredada se verá así





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



Ahora, si agregamos DI a la clase base, solo cambiamos la clase MyBaseComponentDependences, todo lo demás permanece como está. Problema resuelto





PD: sin embargo, creo que la herencia de componentes en Angular debe usarse solo cuando sea realmente necesario, y no es posible ni recomendable transferir la lógica general a servicios, clases separadas o directivas de atributos.








All Articles