Kako deluje Angularjeva hierarhična injekcija odvisnosti?

Question

Accepted Answer

Angularjeva DI je **hierarhična**: injektor tvori drevo, ki odraža struktur komponent/modulov. Ko komponenta zahteva odvisnost, Angular hodi **navzgor** po drevesu injektor dokler ne najde ponudnika — ki nadzira, ali dobite deljeno singleton instanco ali ločeno instanco na komponent. ## Hierarhija injektor ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Iskalnik se začne pri komponenti, ki zahteva, in se širi na korenino. **Prvi** najdeni ponudnik zmaga. ## Mesto, kjer izvedete, določa obseg ```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 {} ``` To je ključna kontrola: `providedIn: 'root'` daje eno deljeno instanco; seznam ponudnika v polju `providers` komponente ustvari novo instanco omejeno na to poddrevo komponent (uporabno za ločevanje stanja po komponenti). ## Modifikatorji 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 dekoratorji nadzirajo *kako daleč* Angular išče drevo injektor — npr. `@Optional` preprečuje napako, ko odvisnost manjka, `@SkipSelf` prisili uporabo instance starša. ## Žetoni injekcije za nerazredne odvisnosti ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Žetoni vam omogočajo injicirati vrednosti/konfiguracijo (ne samo razrede) in zamenjati implementacije (`useClass`, `useValue`, `useFactory`). ## Zakaj je to pomembno Razumevanje hierarhičnega injektor pojasni *zakaj* je storitev deljena na ravni aplikacije ali podvojena po komponenti — pogost vir zmede "zakaj ti komponenti delita/ne delita stanja?". Nadzor obsega ponudnika (`root` proti `providers` komponente), uporaba modifikatorjev (`@Optional`, `@SkipSelf`) in žetoni injekcije za konfiguracijo/zamenjave implementacij je tisto, kar naredi Angularjevo DI zmogljivo tako za arhitekturo kot za testiranje.