Kako funkcionira hijerarhijska injekcija ovisnosti u Angularu?

Question

Accepted Answer

Angular-ova DI je **hijerarhijska**: injektori čine stablo koje zrcali stablo komponenti/modula. Kada komponenta zatraži ovisnost, Angular ide **gore** kroz stablo injektora dok ne pronađe pružatelja — što kontrolira jesu li dobivate zajedničku singleton instancu ili zasebnu instancu po komponenti. ## Hijerarhija injektora ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Pretraga počinje od tražeće komponente i ide prema gore prema korijenskoj. **Prvi** pronađeni pružatelj pobjeđuje. ## Gdje pružate određuje opseg ```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 {} ``` Ovo je ključna poluga: `providedIn: 'root'` daje jednu zajedničku instancu; popis pružatelja u polju `providers` komponente kreira novu instancu s opsegom na to stablo komponenti (korisno za izolaciju stanja po komponenti). ## Modifikatori injekcije ```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 ) {} ``` Ti dekoratori kontroliraju *koliko daleko* Angular pretražuje stablo injektora — npr. `@Optional` izbjegava grešku kada nedostaje ovisnost, `@SkipSelf` forsira korištenje roditeljske instance. ## Tokeni injekcije za ovisnosti koje nisu klase ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokeni vam omogućavaju injeciranje vrijednosti/konfiguracije (ne samo klase) i zamjenu implementacija (`useClass`, `useValue`, `useFactory`). ## Zašto je to važno Razumijevanje hijerarhijskog injektora objašnjava *zašto* je servis dijeljen na razini aplikacije naspram dupliciran po komponenti — česti izvor zbunjenosti "zašto ove komponente dijele/ne dijele stanje?". Kontrola opsega pružatelja (`root` naspram komponente `providers`), korištenje modifikatora (`@Optional`, `@SkipSelf`), i tokeni injekcije za konfiguraciju/zamjenjive implementacije je ono što čini Angular DI moćnom za arhitekturu i testiranje.