Kuinka Angular:in hierarkkinen riippuvuuden injektio toimii?

Question

Accepted Answer

Angular:in DI on **hierarkkinen**: injektorit muodostavat puun, joka peilaa komponentti-/moduulia puuta. Kun komponentti pyytää riippuvuutta, Angular kävelee **ylös** injektoripuun, kunnes se löytää palveluntarjoajan — joka hallitsee, saatko jaetun singleton-instanssin vai erillisen instanssin per komponentti. ## Injektorin hierarkia ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Haku alkaa pyynnön tekevästä komponentista ja kuplii juureen saakka. **Ensimmäinen** löydetty palveluntarjoaja voittaa. ## Missä tarjoat määrää soveltamisalan ```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 {} ``` Tämä on avainvipu: `providedIn: 'root'` antaa yhden jaetun instanssin; palveluntarjoajan listaaminen komponentin `providers`-taulukkoon luo uuden instanssin, joka on rajoitettu kyseiseen komponenttipuuhun (hyödyllinen tilaa eristettäessä per komponentti). ## Injektiomuuntimet ```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 ) {} ``` Nämä dekoraattorit hallitsevat, *kuinka pitkälle* Angular etsii injektoripuuta — esim. `@Optional` välttää virheen, kun riippuvuus puuttuu, `@SkipSelf` pakottaa vanhemman instanssin käyttöä. ## Injektiomerkit ei-luokkariippuvuuksille ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Merkit antavat sinun injektoida arvoja/konfiguraatiota (ei vain luokkia) ja vaihtaa toteutuksia (`useClass`, `useValue`, `useFactory`). ## Miksi se on tärkeää Hierarkisen injektorin ymmärtäminen selittää, *miksi* palvelu on jaettu koko sovelluksessa verrattuna monistettuun per komponentti — usein lähde sekaannukselle "miksi nämä komponentit jakavat/eivät jaa tilaa?". Palveluntarjoajan soveltamisalan hallinta (`root` vs komponentti `providers`), muuntimeiden käyttö (`@Optional`, `@SkipSelf`) ja injektiomerkit konfiguraatiolle/vaihdettaville toteutuksille on se, mikä tekee Angular:in DI:stä tehokkaan sekä arkkitehtuurille että testaukselle.