Ієрархія інжекторів в Angular

Що таке ієрархія інжекторів в Angular?

В Angular впровадження залежностей (Dependency Injection, DI) базується на ієрархії інжекторів, де залежності можуть бути доступні:

Глобально
Тільки в межах модуля
Тільки в компоненті
Тільки в конкретній директиві або пайпі

Angular створює дерево інжекторів, подібне до дерева компонентів. Кожен компонент може мати власний інжектор, успадкований від батьківського.

Рівні ієрархії інжекторів

Глобальний рівень — @Injectable({ providedIn: 'root' })

Сервіс створюється один раз для всього застосунку.
Доступний всюди без необхідності вказувати в providers.

@Injectable({ providedIn: 'root' })
export class LoggerService {}

Використовується за замовчуванням для синглтон-сервісів.

Рівень модуля (в @NgModule.providers)

Сервіс доступний лише в межах вказаного модуля.
Якщо модуль імпортується в інші модулі — поведінка може відрізнятися.

@NgModule({
  providers: [AuthService]
})
export class AuthModule {}

Добре підходить для обмеженого доступу та модулів, що завантажуються за потребою.

Рівень компонент (в @Component.providers)

Сервіс створюється окремо для кожної інстанції компонент.
Підходить для локального стану, незалежного від інших компонентів.

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  providers: [CartService]
})
export class CartComponent {}

Для кожного використання компонент буде створено нову інстанцію сервісу.

Рівень директиви/пайпа (@Directive.providers)

Подібно до компонентів — сервіс створюється локально, всередині елемента, де застосовується директива.

@Directive({
  selector: '[highlight]',
  providers: [HighlightService]
})
export class HighlightDirective {}

Як Angular шукає залежності

Коли Angular впроваджує залежність, він:

Спочатку шукає в локальному інжекторі компонент.
Якщо не знайдено — шукає в батьківському інжекторі.
І так далі до кореневого інжектора (root).
Якщо залежність не знайдена — викидає помилку.

Приклад: вкладені компоненти та різні інжектори

@Component({
  selector: 'parent',
  providers: [SharedService],
  template: `<child></child>`
})
export class ParentComponent {}

@Component({
  selector: 'child',
  template: `...`
})
export class ChildComponent {
  constructor(shared: SharedService) {} // отримає інстанцію з батька
}

Якщо SharedService не вказано в child, він буде успадкований від батька.

Що таке ієрархія інжекторів в Angular?Рівні ієрархії інжекторівГлобальний рівень — @Injectable({ providedIn: 'root' })Рівень модуля (в @NgModule.providers)Рівень компонент (в @Component.providers)Рівень директиви/пайпа (@Directive.providers)Як Angular шукає залежностіПриклад: вкладені компоненти та різні інжектори

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань