Angular 2 - Bağımlılık Enjeksiyonu

Bağımlılık ekleme, bileşenlerin işlevselliğini çalışma zamanında ekleme yeteneğidir. Bir örneğe ve bağımlılık enjeksiyonu uygulamak için kullanılan adımlara bir göz atalım.

Step 1- Enjekte edilebilir dekoratöre sahip ayrı bir sınıf oluşturun. Enjekte edilebilir dekoratör, bu sınıfın işlevselliğinin herhangi bir Angular JS modülünde enjekte edilmesine ve kullanılmasına izin verir.

@Injectable() 
   export class classname {  
}

Step 2 - AppComponent modülünüzde veya servisi kullanmak istediğiniz modülde, @Component dekoratöründe bir sağlayıcı olarak tanımlamanız gerekir.

@Component ({  
   providers : [classname] 
})

Bunun nasıl başarılacağına dair bir örneğe bakalım.

Step 1 - Bir ts app.service.ts adlı hizmet için dosya.

Step 2 - Aşağıdaki kodu yukarıda oluşturulan dosyaya yerleştirin.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Yukarıdaki programla ilgili olarak aşağıdaki noktalara dikkat edilmelidir.

Enjekte edilebilir dekoratör, açısal / çekirdek modülden içe aktarılır.
Enjekte edilebilir dekoratör ile dekore edilmiş appService adında bir sınıf oluşturuyoruz.
"Merhaba dünya" adlı basit bir dizge döndüren getApp adlı basit bir işlev oluşturuyoruz.

Step 3 - app.component.ts dosyasına aşağıdaki kodu yerleştirin.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

Yukarıdaki programla ilgili olarak aşağıdaki noktalara dikkat edilmelidir.

İlk olarak, appService modülümüzü appComponent modülüne aktarıyoruz.
Ardından, hizmeti bu modülde bir sağlayıcı olarak kaydediyoruz.
Yapıcıda, appComponent modülünün herhangi bir yerinde çağrılabilmesi için appService türünde _appService adlı bir değişken tanımlıyoruz.
Örnek olarak, ngOnInit yaşam döngüsü kancasında, hizmetin getApp işlevini çağırdık ve çıktıyı AppComponent sınıfının değer özelliğine atadık.

Tüm kod değişikliklerini kaydedin ve tarayıcıyı yenileyin, aşağıdaki çıktıyı alacaksınız.