Cum funcționează injecția de dependență ierarhică a Angular?

Question

Accepted Answer

DI-ul Angular este **ierarhic**: injectorii formează un arbore care reflectă arborele component/modul. Când o componentă solicită o dependență, Angular merge **în sus** prin arborele injectorilor până când găsește un provider — care controlează dacă obțineți o instanță singleton partajată sau o instanță separată per componentă. ## Ierarhia injectorului ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` O căutare începe la componenta care solicită și se ridică spre rădăcină. **Primul** provider găsit câștigă. ## Unde furnizezi determină domeniul de aplicare ```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 {} ``` Acesta este pârghia cheie: `providedIn: 'root'` oferă o singură instanță partajată; enumerarea unui provider în array-ul `providers` al unei componente creează o instanță nouă limitată la acel subarbore de componente (util pentru izolarea stării per componentă). ## Modificatori de injecție ```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 ) {} ``` Acești decoratori controlează *cât de departe* Angular caută arborele injectorilor — de ex. `@Optional` evită o eroare când o dependență lipsește, `@SkipSelf` forțează utilizarea instanței unui părinte. ## Tokeni de injecție pentru dependențe non-clase ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokenii vă permit să injectați valori/configurații (nu doar clase) și să schimbați implementările (`useClass`, `useValue`, `useFactory`). ## De ce conteaza Înțelegerea injectorului ierarhic explică *de ce* un serviciu este partajat la nivel de aplicație versus duplicat per componentă — o sursă frecventă de confuzie "de ce aceste componente partajează/nu partajează starea?". Controlul domeniului de aplicare al provider-ului (`root` vs componentă `providers`), utilizarea modificatorilor (`@Optional`, `@SkipSelf`) și tokenilor de injecție pentru configurații/implementări interschimbabile este ceea ce face DI-ul Angular puternic atât pentru arhitectură cât și pentru testare.