Komponentenvererbung im Winkel: Eine einfache Möglichkeit, die Abhängigkeitsinjektion zu lösen

Das eigentliche Problem: Manchmal haben wir viele ähnliche Komponenten in einem Projekt mit derselben Logik, demselben DI, denselben Eigenschaften usw., und es entsteht der Gedanke: Warum nicht das Ganze in eine Basiskomponente (oder vielmehr eine Direktive) einfügen? ) mit einer abstrakten Klasse, und die restlichen Komponenten sind bereits geerbt? In der Tat ist der Gedanke gut, das DRY-Prinzip wird eingehalten, wir haben eine Quelle der Wahrheit, wenn Sie dieselbe allgemeine Logik ändern, müssen Sie nicht über alle Komponenten usw. springen.

Aber es gibt eine Einschränkung: diese unglücklichen Designer. In jeder geerbten Komponente müssen alle DIs an den Konstruktor des übergeordneten Elements übergeben werden.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

sieht nicht sehr gut aus, ist aber nicht schlecht. Das Problem ist, dass wir, wenn wir DI in der Basisklasse hinzufügen, über alle geerbten Komponenten springen und diese Abhängigkeit dem Konstruktor hinzufügen müssen. Unser DRY hat geweint :-))

Versuchen wir es anders: Zusammen mit der Basiskomponente erstellen wir eine Injectable-Klasse, in die wir alle Abhängigkeiten einschließen. Und injiziere es in die Basisklasse

@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
     ) {}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Die geerbte Klasse sieht folgendermaßen aus

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Wenn wir jetzt DI zur Basisklasse hinzufügen, ändern wir nur die MyBaseComponentDependences-Klasse, alles andere bleibt wie es ist. Das Problem ist gelöst

PS: Ich glaube jedoch, dass die Komponentenvererbung in Angular nur verwendet werden sollte, wenn dies wirklich notwendig ist, und es nicht möglich oder ratsam ist, allgemeine Logik auf Dienste, separate Klassen oder Attributanweisungen zu übertragen.