Warisan Komponen dalam Sudut: Cara Mudah Mengatasi Injeksi Ketergantungan

Jadi, masalah sebenarnya: terkadang kita memiliki banyak komponen serupa dalam sebuah proyek, dengan logika yang sama, DI yang sama, properti, dll., Dan muncul pemikiran: mengapa tidak meletakkan semuanya ke dalam komponen dasar (atau lebih tepatnya sebuah arahan ) dengan kelas abstrak, dan komponen lainnya sudah diwarisi? Faktanya, pemikirannya bagus, prinsip KERING diperhatikan, kami memiliki satu sumber kebenaran, ketika mengubah logika umum yang sama, Anda tidak perlu melompati semua komponen, dll.

Tapi ada satu peringatan: para desainer yang malang ini. Setiap komponen yang diwariskan harus meneruskan semua DI ke konstruktor induk.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

terlihat tidak terlalu bagus, tapi tidak buruk. Masalahnya adalah jika kita menambahkan DI di kelas dasar, kita harus melompati semua komponen yang diwariskan dan menambahkan ketergantungan ini ke konstruktor. KERING kami menangis :-))

Mari kita coba melakukannya secara berbeda: bersama dengan komponen dasar, kita akan membuat kelas Injectable, di mana kita akan membungkus semua dependensi. Dan menyuntikkannya ke kelas dasar

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Kelas yang diwariskan akan terlihat seperti ini

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Sekarang, jika kita menambahkan DI ke kelas dasar, kita hanya mengubah kelas MyBaseComponentDependences, yang lainnya tetap apa adanya. Masalah terpecahkan

PS: Namun, saya percaya bahwa pewarisan komponen di Angular harus digunakan hanya jika benar-benar diperlukan, dan tidak mungkin atau tidak disarankan untuk mentransfer logika umum ke layanan, kelas terpisah, atau arahan atribut.