Si funksionon injekcioni i varësisë hierarkike të Angular?

Question

Accepted Answer

DI i Angular është **hierarkik**: injektorët formojnë një pemë që pasqyron pemën e komponentës/modulit. Kur një komponent kërkon një varësi, Angular ecën **lart** në pemën e injektorëve derisa gjen një fornues — i cili kontrollon nëse merrni një instancë të vetme të ndarë ose një instancë të veçantë për komponent. ## Hierarkia e injektorëve ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Një kërkesë fillon në komponentin që kërkon dhe bëhet bubble deri në rrënjën. Furnuesi **i parë** i gjetur fiton. ## Ku e ofroni përcakton shtrirjen ```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 {} ``` Kjo është leva kryesore: `providedIn: 'root'` jep një instancë të vetme të ndarë; renditja e një fornuesi në vargun `providers` të një komponenti krijon një instancë të freskët me shtrirje në atë nëndrë komponenti (e dobishme për izolimin e gjendjes për komponent). ## Modifikuesit e injekcioni ```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 ) {} ``` Këto dekoratorë kontrollojnë *sa larg* Angular kërkon në pemën e injektorëve — p.sh. `@Optional` shmang një gabim kur mungon një varësi, `@SkipSelf` forcon përdorimin e një instancë të prindërit. ## Shenja injekcioni për varësi jo-klasore ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Shenjat ju lejojnë të injektoni vlera/konfigurim (jo vetëm klasa) dhe të zëvendësoni zbatimet (`useClass`, `useValue`, `useFactory`). ## Pse është e rëndësishme Kuptuesi i injektorit hierarkik shpjegon *pse* një shërbim ndahet në të gjithë aplikacionin kundrejt dyfishimit për komponent — një burim i shpeshtë i ngatërrimit "pse këto komponente ndajnë/nuk ndajnë gjendjen?". Kontrollimi i shtrirjes së furnuesit (`root` kundrejt komponentit `providers`), përdorimi i modifikuesve (`@Optional`, `@SkipSelf`) dhe shenjat injekcioni për konfigurim/zbatimet e zëvendësueshme është ajo që bën DI të Angular të fuqishëm si për arkitekturën ashtu edhe për testimin.