Kaip veikia Angular hierarchinė priklausomybės injekcija?

Question

Accepted Answer

Angular DI yra **hierarchinė**: injektoriai sudaro medį, kuris atspindi komponentų/modulių medį. Kai komponentas prašo priklausomybės, Angular eina **aukštyn** injektoriaus medžiu, kol randa teikėją — kuris kontroliuoja, ar gauni bendrai naudojamą singleton, ar atskirą instanciją kiekvienam komponentui. ## Injektoriaus hierarchija ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Paieška prasideda nuo prašančio komponento ir burbulais pakyla iki šaknies. **Pirmas** rastas teikėjas laimi. ## Kur jūs teikiate, nustato sritį ```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 {} ``` Tai yra pagrindinė svirtis: `providedIn: 'root'` suteikia vieną bendrai naudojamą instanciją; teikėjo sąrašas komponento `providers` masyve sukuria naują instanciją, ribojamą to komponento posmedžiui (naudinga komponentų būsenai izoliuoti). ## Injekcijos modifikatoriai ```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 ) {} ``` Šie dekoratoriai kontroliuoja *kaip toli* Angular ieško injektoriaus medžio — pvz., `@Optional` išvengia klaidos, kai priklausomybė trūksta, `@SkipSelf` priverčia naudoti tėvų instanciją. ## Injekcijos žetonai ne-klasės priklausomybėms ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Žetonai leidžia injekcija reikšmės/konfigūraciją (ne tik klases) ir pakeisti įgyvendintus dalykus (`useClass`, `useValue`, `useFactory`). ## Kodėl tai svarbu Hierarhinės injektoriaus supratimas paaiškina *kodėl* paslauga bendrai naudojama visoje programoje o ne dubliuojama kiekviename komponente — dažnas šaltinis "kodėl šie komponentai dalijasi/nesidalija būsenos?" sumaišymo. Teikėjo srities kontrolė (`root` vs komponento `providers`), modifikatorių naudojimas (`@Optional`, `@SkipSelf`) ir injekcijos žetonai konfigūracijai/keičiamiems įgyvendinimams — tai daro Angular DI galingą ir architektūroje, ir testavime.