Inject tabanlı DI

Enjekte edilebilir bir servis oluşturmak, Angular'daki bağımlılık enjeksiyonu (DI) sisteminin ilk kısmıdır. Bir servisi bir bileşene nasıl enjekte edersiniz? Angular'ın uygun bağlamda kullanılabilecek inject() adında pratik bir fonksiyonu vardır.

NOTE: Enjeksiyon bağlamları bu eğitimin kapsamı dışındadır, ancak bağımlılık enjeksiyonu (DI) temel kılavuzundan ve DI bağlam kılavuzundan daha fazla bilgi edinebilirsiniz.

Bu aktivitede, bir servisi nasıl enjekte edeceğinizi ve bir bileşende nasıl kullanacağınızı öğreneceksiniz.

Sınıf özelliklerini DI sistemi tarafından sağlanan değerlerle başlatmak genellikle faydalıdır. İşte bir örnek:

@Component({...})
class PetCareDashboard {
  petRosterService = inject(PetRosterService);
}

  1. CarService'i enjekte edin

    app.ts dosyasında, inject() fonksiyonunu kullanarak CarService'i enjekte edin ve carService adında bir özelliğe atayın.

    NOTE: carService özelliği ile CarService sınıfı arasındaki farka dikkat edin.

  2. carService örneğini kullanın

    inject(CarService) çağrısı, uygulamanızda kullanabileceğiniz bir CarService örneği verdi ve bu carService özelliğinde saklandı.

    display özelliğini aşağıdaki uygulama ile başlatın:

    display = this.carService.getCars().join(' ⭐️ ');

  3. App şablonunu güncelleyin

    app.ts dosyasındaki bileşen şablonunu aşağıdaki kodla güncelleyin:

    template: `<p>Car Listing: {{ display }}</p>`,

İlk servisinizi bir bileşene enjekte ettiniz - harika çaba.