Angularでのコンポーネントの継承：依存性注入を解決する簡単な方法

したがって、実際の問題：プロジェクト内に、同じロジック、同じDI、プロパティなどを持つ多くの類似したコンポーネントがあり、考えが生じます。全体を基本コンポーネント（またはディレクティブ）に入れてみませんか。 ）抽象クラスを使用し、残りのコンポーネントはすでに継承されていますか？実際、考えはよく、DRYの原則が守られています。信頼できる唯一の情報源があります。同じ一般的なロジックを変更する場合、すべてのコンポーネントを飛び越える必要はありません。

ただし、注意点が1つあります。それは、これらの不幸な設計者です。継承された各コンポーネントでは、すべてのDIを親のコンストラクターに渡す必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

見た目はあまり良くありませんが、悪くはありません。問題は、基本クラスにDIを追加する場合、継承されたすべてのコンポーネントを飛び越えて、この依存関係をコンストラクターに追加する必要があることです。私たちのDRYは泣いていた:-)）

別の方法で試してみましょう。基本コンポーネントと一緒に、すべての依存関係をラップするInjectableクラスを作成します。そしてそれを基本クラスに注入します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

継承されたクラスは次のようになります

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ここで、基本クラスにDIを追加すると、MyBaseComponentDependencesクラスのみが変更され、それ以外はすべてそのままになります。問題が解決しました

PS：ただし、Angularでのコンポーネントの継承は、本当に必要な場合にのみ使用する必要があり、一般的なロジックをサービス、個別のクラス、または属性ディレクティブに転送することは不可能または推奨されないと思います。