Jak funguje hierarchické vkládání závislostí v Angularu?

Question

Accepted Answer

DI v Angularu je **hierarchické**: injektory tvoří strom, který zrcadlí strom komponent/modulů. Když komponenta požaduje závislost, Angular procházejí strom injektorů **nahoru**, dokud nenajde poskytovatele — který určuje, zda získáte sdílený singleton nebo samostatnou instanci pro každou komponentu. ## Hierarchie injektoru ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Vyhledávání začíná v požadující komponentě a probublává až ke kořenu. **První** nalezený poskytovatel vyhrává. ## Kde poskytujete určuje rozsah ```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 {} ``` Toto je klíčová páka: `providedIn: 'root'` poskytuje jednu sdílenou instanci; uvedení poskytovatele v poli `providers` komponenty vytvoří novou instanci omezenou na tento podstrom komponenty (užitečné pro izolaci stavu na komponentu). ## Modifikátory vkládání ```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 ) {} ``` Tyto dekorátory řídí, *jak daleko* Angular prohledává strom injektorů — např. `@Optional` se vyhne chybě, když chybí závislost, `@SkipSelf` vynucuje použití instance nadřazené. ## Vkládací tokeny pro závislosti mimo třídu ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokeny vám umožňují vkládat hodnoty/konfiguraci (nejen třídy) a vyměňovat implementace (`useClass`, `useValue`, `useFactory`). ## Proč je to důležité Pochopení hierarchického injektoru vysvětluje, *proč* je služba sdílena v celé aplikaci oproti duplikaci na komponentu — časté zdroj nejasností "proč tyto komponenty sdílejí/nesdílejí stav?". Řízení rozsahu poskytovatele (`root` oproti komponentě `providers`), používání modifikátorů (`@Optional`, `@SkipSelf`) a vkládacích tokenů pro konfiguraci/zaměnitelné implementace je to, co činí DI v Angularu výkonným pro architekturu i testování.