Herança de componentes em Angular: uma maneira fácil de resolver a injeção de dependência

Então, o problema real: às vezes temos muitos componentes semelhantes em um projeto, com a mesma lógica, o mesmo DI, propriedades, etc., e surge o pensamento: por que não colocar tudo em um componente base (ou melhor, uma diretiva ) com uma classe abstrata, e o resto dos componentes já são herdados? Na verdade, o pensamento é bom, o princípio DRY é observado, temos uma fonte de verdade, ao mudar essa mesma lógica geral, você não terá que pular todos os componentes, etc.

Mas há uma ressalva: esses designers infelizes. É necessário em cada componente herdado passar todos os DIs para o construtor do pai.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

não parece muito bom, mas não é ruim. O problema é que, se adicionarmos DI na classe base, teremos que pular todos os componentes herdados e adicionar essa dependência ao construtor. Nosso DRY estava chorando :-))

Vamos tentar fazer de outra forma: junto com o componente base, criaremos uma classe Injetável, onde envolveremos todas as dependências. E injete-o na classe 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
     ) {}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

A classe herdada ficará assim

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Agora, se adicionarmos DI à classe base, mudamos apenas a classe MyBaseComponentDependences, todo o resto permanece como está. Problema resolvido

PS: entretanto, acredito que a herança de componentes em Angular deve ser usada somente quando for realmente necessário, e não é possível ou aconselhável transferir lógica geral para serviços, classes separadas ou diretivas de atributos.