Hogyan működik az Angular hierarchikus függőséginjektálása?

Question

Accepted Answer

Az Angular DI **hierarchikus**: az injektorok egy fát képeznek, amely tükrözi az összetevő/modul fát. Amikor egy összetevő függőséget kér, az Angular az injektorfán **felfelé** halad, amíg meg nem találja a szolgáltatót — amely szabályozza, hogy megosztott singleton vagy összetevőnkénti külön példányt kap-e. ## Az injektorfák hierarchiája ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` A keresés a kérelmezőből indul és a gyökérig buborékol. Az **első** talált szolgáltató nyer. ## Az a hely, ahogy biztosítasz, meghatározza a hatókört ```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 {} ``` Ez a kulcs az összeköttetéshez: `providedIn: 'root'` egyetlen megosztott példányt ad; a szolgáltató felsorolása egy összetevő `providers` tömbje új, az összetevő-részfához hatásos példányt hoz létre (hasznos az állapot összetevő szerinti elkülönítéséhez). ## Injektálási módosítók ```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 ) {} ``` Ezek a dekorátorok szabályozzák, hogy az Angular **meddig** keresi az injektorfát — például `@Optional` elkerüli a hibát, ha egy függőség hiányzik, `@SkipSelf` a szülő példányának használatát kényszeríti. ## Nem-osztály függőségekhez szükséges injektálási tokenek ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` A tokenek lehetővé teszik értékek/konfigurációk injektálását (nem csak osztályok) és az implementációk cseréjét (`useClass`, `useValue`, `useFactory`). ## Miért fontos ez A hierarchikus injektort megértve elmagyarázható, hogy *miért* egy szolgáltatás az alkalmazásban megosztott az összetevőnkénti duplikáláshoz képest — egy gyakori összevisszaság forrása: "miért osztoznak/nem osztoznak ezek az összetevők az állapotban?". A szolgáltató hatáskörének szabályozása (`root` és az összetevő `providers`), a módosítók használata (`@Optional`, `@SkipSelf`) és az injektálási tokenek a konfigurációhoz/cserélhető implementációkhoz az Angular DI-ját szervezeti és tesztelési szempontból is erőssé teszik.