Angular - Dependency Injection

DI (dependency injection) w Angularze pozwala na dostarczanie zależności. Pośrednikiem między elementami i zależnościami, które można wstrzykiwać, jest Injector. Gdy zależność jest potrzebna, Injector sprawdza, czy istnieje jej instancja i jeśli nie, tworzy ją i dodaje do rejestru. W większości przypadków, możesz używać uproszczonego DI, jednak warto wiedzieć, jak działa to pod spodem.

Rejestrowanie zależności

Zależność można zarejestrować w kilku miejscach.

W metodzie bootstrapApplication - wtedy serwis będzie dostępny w całej aplikacji.

Na poziomie komponentu - dodając ją do tablicy providers. W takiej sytuacji zostanie utworzona osobna instancja danej zależności.

Uwaga - zależność można w ten sposób wstrzyknąć do rodzica komponentu i będzie ona dostępna dla wszystkich dzieci. 

Do Root Injectora, używając provideIn: 'root'

W tej sytuacji, Angular utworzy jedną instancję tego serwisu. 

Wstrzykiwanie zależności

Zależność można wstrzyknąć na dwa sposoby, przez konstruktor (stary sposób), albo przez metodę inject.

Hierarchia injektorów

Angular posiada 2 hierarchie injectorów: Model Injector i Element Injector.

Model Injector

NullInjector

Jego zadaniem jest wyrzucić błąd, jeśli Angular nie znajdzie zależności.

Platform Module

Utworzony gdy wywoływana jest metoda platformBrowserDynamic(), zawiera metody specyficzne dla platformy.

Root Injector

Gdy Angular startuje, tworzy Root Injector. Zawiera serwisy które nie są lazy-loadowane z adnotacjami @ngModule i @Injectable. Do niego są wstrzykiwane serwisy z adnotacją provideIn: 'root'.

Child Injector

Injector utworzony dla każdego lazy-loadowanego modułu.

Element Injector

Serwisy, które są skonfigurowane w tablicy providers dla komponentów i dyrektyw. Domyślnie komponent będzie poszukiwał swojej zależności najpierw w swojej tablicy providers, a następnie w tablicach rodziców.

Jeśli zależność nie zostanie znaleziona, Angular sprawdzi w którym module jest zadeklarowany nasz komponent i zacznie przeszukiwanie od Root Injector w Model Injector.

 Na podstawie - https://www.youtube.com/watch?v=G8zXugcYd7o&t=51s&ab_channel=DecodedFrontend

oraz dokumentacji Angulara