Angular Academy · Урок

ngOnInit и инициализация

Выполняйте логику настройки при запуске компонента.

«ngOnInit и инициализация» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Что такое хуки жизненного цикла

У компонентов Angular есть жизненный цикл, которым управляет фреймворк: создание, обнаружение изменений, отображение и уничтожение. Хуки жизненного цикла позволяют выполнять код в определённые моменты.

Знакомство с OnInit

Хук OnInit выполняется один раз после того, как Angular установил входные значения компонента и отобразил начальное представление. Это стандартное место для логики инициализации.

Реализация OnInit

Реализуйте интерфейс OnInit и добавьте метод ngOnInit. Angular вызовет его автоматически.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Конструктор и ngOnInit

Конструктор выполняется первым, до установки входных значений, и должен заниматься только лёгким внедрением зависимостей. Используйте ngOnInit для полноценной настройки после того, как входные значения станут доступны.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Входные значения готовы в ngOnInit

К моменту выполнения ngOnInit все свойства @Input получают начальные значения, переданные родительским компонентом.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Загрузка данных в ngOnInit

Распространённый подход — загружать данные из сервиса в ngOnInit, поскольку к этому моменту доступны входные значения и зависимости.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit выполняется один раз

В отличие от хуков обнаружения изменений, ngOnInit выполняется ровно один раз за жизненный цикл компонента — сразу после первого ngOnChanges.

Порядок относительно ngOnChanges

Если у компонента есть входные значения, ngOnChanges сначала срабатывает с начальными значениями, а затем выполняется ngOnInit. При отсутствии входных значений ngOnInit всё равно выполняется.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Инициализация форм

Создание реактивных форм — классическая задача для ngOnInit, поскольку для настройки формы могут потребоваться внедрённые сервисы.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Не перегружайте конструкторы

Избегайте выполнения сложной работы в конструкторе. Он запускается до подключения входных значений Angular, а побочные эффекты в конструкторе усложняют тестирование и прогнозирование поведения компонентов.

Асинхронная инициализация

Из ngOnInit можно вызывать асинхронную логику, но сам метод возвращает void; подписывайтесь или используйте асинхронные шаблоны внутри него.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете OnInit.

Итоги

Хук OnInit с методом ngOnInit выполняется один раз после привязки входных значений и идеально подходит для загрузки данных и настройки формы. Не перегружайте конструктор и оставляйте инициализацию для ngOnInit.

Часто задаваемые вопросы

Урок «ngOnInit и инициализация» бесплатный?

Да — полный текст урока «ngOnInit и инициализация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «ngOnInit и инициализация»?

Выполняйте логику настройки при запуске компонента. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «ngOnInit и инициализация»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy