Jak działa hierarchiczna iniekcja zależności w Angular?

Question

Accepted Answer

DI w Angular jest **hierarchiczne**: injektory tworzą drzewo odzwierciedlające drzewo komponent/modułów. Gdy komponent zażąda zależności, Angular idzie **w górę** drzewa injektorów aż do znalezienia providera — który kontroluje, czy uzyskasz jedną wspólną instancję singleton czy osobną instancję na komponent. ## Hierarchia injektora ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Wyszukiwanie zaczyna się w żądającym komponencie i bąbelkuje do głównego. **Pierwszy** znaleziony provider wygrywa. ## Gdzie udostępniasz określa zakres ```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 {} ``` To jest kluczowa dźwignia: `providedIn: 'root'` daje jedną wspólną instancję; wymienienie providera w tablicy `providers` komponentu tworzy nową instancję ograniczoną do tego poddrzewa komponentu (przydatne do izolowania stanu na komponent). ## Modyfikatory iniekcji ```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 ) {} ``` Te dekoratory kontrolują *jak daleko* Angular przeszukuje drzewo injektorów — np. `@Optional` unika błędu gdy brakuje zależności, `@SkipSelf` zmusza do użycia instancji rodzica. ## Tokeny iniekcji dla zależności innych niż klasy ```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 pozwalają na wstrzyknięcie wartości/konfiguracji (nie tylko klas) i zamienianie implementacji (`useClass`, `useValue`, `useFactory`). ## Dlaczego to ważne Zrozumienie hierarchicznego injektora wyjaśnia *dlaczego* serwis jest udostępniany w całej aplikacji kontra zduplikowany na komponent — częste źródło zamieszania "dlaczego te komponenty dzielą/nie dzielą stan?". Kontrolowanie zakresu providera (`root` vs komponent `providers`), używanie modyfikatorów (`@Optional`, `@SkipSelf`) i tokeny iniekcji dla konfiguracji/wymiennych implementacji to to, co czyni DI w Angular potężnym zarówno dla architektury jak i testowania.