Перейти к содержанию

Инъекция зависимостей

📅 30.09.2026

Общий код и единое управление поведением в приложении и тестах.

Когда логику нужно разделить между компонентами, Angular использует шаблон инъекции зависимостей. На нём делают «сервис»: код внедряют в компоненты и ведут его из одного места.

Что такое сервисы?

Сервис — это переиспользуемый код, который можно внедрить.

Как и компонент, сервис состоит из следующего:

  • Декоратор TypeScript, который помечает класс как сервис Angular через @Service и позволяет описать сервис, доступный в любом месте приложения.
  • Класс TypeScript с кодом, который станет доступен после внедрения сервиса.

Пример сервиса Calculator.

1
2
3
4
5
6
7
8
import {Service} from '@angular/core';

@Service()
export class Calculator {
  add(x: number, y: number) {
    return x + y;
  }
}

Как пользоваться сервисом

Чтобы воспользоваться сервисом в компоненте, нужно:

  1. Импортировать сервис.
  2. Объявить поле класса, в которое внедряется сервис. Присвоить полю результат вызова встроенной функции inject: она создаёт сервис.

Так это выглядит в компоненте Receipt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import {Component, inject} from '@angular/core';
import {Calculator} from './calculator';

@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculator = inject(Calculator);
  totalCost = this.calculator.add(50, 25);
}

В этом примере Calculator получают вызовом функции Angular inject и передают в неё сервис.

Следующий шаг

Источник: https://angular.dev/essentials/dependency-injection

Комментарии