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.