Angular'ın hiyerarşik bağımlılık enjeksiyonu nasıl çalışır?

Question

Accepted Answer

Angular'ın DI **hiyerarşik**dir: injektörler, bileşen/modül ağacını yansıtan bir ağaç oluşturur. Bir bileşen bir bağımlılık istediğinde, Angular bir sağlayıcı bulana kadar injektör ağacı **yukarı** doğru yürür — bu, paylaşılan bir singleton veya bileşen başına ayrı bir örnek alıp almadığınızı kontrol eder. ## Injektör hiyerarşisi ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Bir arama isteyen bileşende başlar ve köke doğru yayılır. **İlk** bulunan sağlayıcı kazanır. ## Sağladığınız yer kapsamı belirler ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` Bu anahtar kontrol: `providedIn: 'root'` tek bir paylaşılan örnek verir; bir bileşenin `providers` dizisinde bir sağlayıcıyı listeleme, o bileşen alt ağacıyla sınırlı yeni bir örnek oluşturur (bileşen başına durumu izole etmek için yararlı). ## Enjeksiyon değiştiricileri ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` Bu dekoratörler Angular'ın injektör ağacını *ne kadar* aradığını kontrol eder — örneğin `@Optional` bir bağımlılık eksik olduğunda hatayı önler, `@SkipSelf` bir ana öğenin örneğini kullanmaya zorlar. ## Non-sınıf bağımlılıklar için enjeksiyon tokens'ları ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Token'lar değer/config (sadece sınıflar değil) enjekte etmenize ve uygulamaları değiştirmenize izin verir (`useClass`, `useValue`, `useFactory`). ## Neden önemli Hiyerarşik injektörü anlamak, bir hizmetin neden uygulama genelinde paylaşıldığını vs. bileşen başına çoğaltıldığını açıklar — "bu bileşenler neden durumu paylaşıyor/paylaşmıyor?" kafa karışıklığının sık nedeni. Sağlayıcı kapsamını kontrol etmek (`root` ve bileşen `providers`), değiştiricileri kullanmak (`@Optional`, `@SkipSelf`) ve config/değiştirilebilir uygulamalar için enjeksiyon token'larını kullanmak, Angular'ın DI'ı hem mimari hem de test için güçlü kılan şeyledir.