Kif taħdem l-injezzjoni tal-dipendenza ġerarkika ta' Angular?

Question

IT Interview Practice · Accepted Answer

Il-DI ta' Angular huwa **ġerarkiku**: l-injectors jiffurmaw siġra li trattoduc is-siġra tal-komponent/modulu. Meta komponent jitlob dipendenza, Angular jimxi **up** is-siġra tal-injector sakemm issib provider — li jikkontolla jekk tieħu instanza singleton maqsuma jew instanza separata għal kull komponent. ## Il-ġerarkija tal-injector ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Riċerka tibda fil-komponent li jitlob u tbubbla sal-għerq. Il-provider **ewwel** misjuba jirbaħ. ## Fejn inti tipprovdi tiddetermina l-iskop ```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 {} ``` Di hija l-leva prinċipali: `providedIn: 'root'` tagħti instanza waħda maqsuma; l-elenko ta' provider fi l-array `providers` tal-komponent jinħoloq instanza ġdida skopata lit-subtree tal-komponent (utli għal iżolazzjoni tal-istat għal kull komponent). ## Modifikaturi ta' injezzjoni ```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 ) {} ``` Dawk id-dekoraturi jikkontollaw *kemm' il bogħod* Angular tfittex is-siġra tal-injector — eż. `@Optional` jevita żball meta dipendenza hija nieqsa, `@SkipSelf` it-tieħu instanza tal-ġenitor. ## Tokens ta' injezzjoni għal dipendenzi mhux-klassi ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens iħalluk tinjezzjon valuri/konfigurazzjoni (mhux biss klassijiet) u ibdel implementazzjonijiet (`useClass`, `useValue`, `useFactory`). ## Għaliex hija importanti L-għarfien tal-injector ġerarkiku jispjega *għaliex* servizz huwa maqsum fit-tul tal-app vs duplikat għal kull komponent — sors frekwenti tal-konfużjoni "għaliex dawn il-komponentiet jaqsmu/ma jaqsmux istat?". Il-kontroll tal-iskop tal-provider (`root` vs komponent `providers`), l-użu tal-modifikaturi (`@Optional`, `@SkipSelf`), u tokens ta' injezzjoni għal konfigurazzjoni/implementazzjonijiet li jistgħu jibdlu hija dik li tagħmel id-DI ta' Angular qawwija għat-tanzin u t-testazzjoni.

Il-ġerarkija tal-injector

Fejn inti tipprovdi tiddetermina l-iskop

Modifikaturi ta' injezzjoni

Tokens ta' injezzjoni għal dipendenzi mhux-klassi

Għaliex hija importanti

Mistoqsijiet relatati