Функция inject
Разрешайте зависимости с помощью функции inject.
«Функция inject» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Функция inject
Функция inject() получает зависимость из внедрятеля. Это современная альтернатива внедрению зависимостей через параметры конструктора.
Базовое использование
Вызовите inject с нужным классом и присвойте результат полю.
import { Component, inject } from '@angular/core';
import { DataService } from './data.service';
@Component({ selector: 'app-x', template: '' })
export class XComponent {
private data = inject(DataService);
}Сравнение с внедрением через конструктор
В старом стиле зависимости объявляются как параметры конструктора. inject() выполняет ту же задачу, что и инициализатор поля, но часто выглядит понятнее.
// old style:
// constructor(private data: DataService) {}Где можно вызывать inject
inject() должен выполняться в контексте внедрения: во время создания компонента, директивы или сервиса, а также в инициализаторах полей и фабричных функциях провайдеров.
Внедрение в сервисе
Используйте inject и внутри сервисов, например чтобы получить HttpClient.
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class Api {
private http = inject(HttpClient);
}Меньше шаблонного кода
С inject вам не нужны длинные сигнатуры конструкторов. Каждая зависимость представлена простым объявлением поля, которое легко читать и переставлять.
Использование внедрённых сервисов
После внедрения обращайтесь к сервису как к любому объекту.
export class XComponent {
private store = inject(CounterStore);
add() { this.store.increment(); }
}inject в функциональных защитниках
Функциональные защитники маршрутов и преобразователи выполняются в контексте внедрения, поэтому внутри них можно вызывать inject для доступа к сервисам.
// export const authGuard = () => {
// const auth = inject(AuthService);
// return auth.isLoggedIn();
// };Необязательные зависимости
inject принимает параметры, например позволяет пометить зависимость как необязательную. В таком случае при отсутствии зависимости функция вернёт null, а не вызовет ошибку.
// const logger = inject(Logger, { optional: true });За пределами контекста внедрения
Вызов inject за пределами контекста внедрения, например в обратном вызове setTimeout, приводит к ошибке. Вместо этого получите зависимость во время создания объекта.
Почему стоит предпочесть inject
inject хорошо работает с примесями, базовыми классами и функциональными API, а также делает классы компонентов более компактными. Это рекомендуемый подход в современном Angular.
Быстрая проверка: inject
Получение зависимости.
Итоги: inject
Вы изучили функцию inject() как современный способ получения зависимостей. Её можно использовать в компонентах, сервисах и функциональных защитниках внутри контекста внедрения. По сравнению с внедрением через конструктор она уменьшает количество шаблонного кода и поддерживает параметры, например необязательность зависимости. Далее: провайдеры и области действия.
Часто задаваемые вопросы
Урок «Функция inject» бесплатный?
Да — полный текст урока «Функция inject» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функция inject»?
Разрешайте зависимости с помощью функции inject. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Функция inject»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.