Bağımlılık Enjeksiyonu

Bileşenler arasında mantık paylaşmanız gerektiğinde, Angular bağımlılık enjeksiyonu tasarım kalıbını kullanır. Bu kalıp, tek bir doğruluk kaynağından yönetirken bileşenlere kod enjekte etmenizi sağlayan bir "servis" oluşturmanıza olanak tanır.

Servisler Nedir?

Servisler, enjekte edilebilen yeniden kullanılabilir kod parçalarıdır.

Bir bileşen tanımlamaya benzer şekilde, servisler aşağıdakilerden oluşur:

• Sınıfı @Service aracılığıyla bir Angular servisi olarak tanımlayan ve uygulamanızın herhangi bir yerinden erişilebilen bir servis belirlemenize olanak tanıyan bir TypeScript dekoratörü.
• Servis enjekte edildiğinde erişilebilir olacak istenen kodu tanımlayan bir TypeScript sınıfı

İşte bir Calculator servisi örneği.

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

@Service()
export class Calculator {
  add(x: number, y: number) {
    return x + y;
  }
}

Bir Servis Nasıl Kullanılır

Bir bileşende servis kullanmak istediğinizde şunları yapmanız gerekir:

1. Servisi içe aktarın
2. Servisin enjekte edildiği bir sınıf alanı tanımlayın. Sınıf alanını, servisi oluşturan yerleşik inject fonksiyonunun çağrısının sonucuna atayın

Receipt bileşeninde nasıl görünebileceği aşağıdadır:

import {Component, inject} from '@angular/core';
import {Calculator} from './calculator';

@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculator = inject(Calculator);
  totalCost = this.calculator.add(50, 25);
}

Bu örnekte, Calculator Angular'ın inject fonksiyonu çağrılarak ve servis ona geçirilerek kullanılmaktadır.

Sonraki Adım