Angular Academy · Урок

ngOnChanges и изменения входных данных

Реагируйте на изменения входных свойств.

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

Реакция на изменения входных значений

Хук OnChanges позволяет компоненту реагировать при каждом изменении его свойств @Input. Angular вызывает ngOnChanges до ngOnInit и при каждом обновлении входного значения.

Реализация OnChanges

Реализуйте интерфейс OnChanges и добавьте метод ngOnChanges, который получает объект SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

Объект SimpleChanges

SimpleChanges — это карта, ключами которой являются имена входных значений. Каждая запись содержит объект SimpleChange со свойствами currentValue, previousValue и firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Определение первого изменения

Флаг firstChange имеет значение true при первой установке входного значения. Используйте его, чтобы отличать инициализацию от последующих обновлений.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Реакция на конкретное входное значение

Всегда проверяйте наличие ключа перед чтением его значения, поскольку не каждое входное значение изменяется в каждом цикле.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Обнаружение изменений по ссылке

ngOnChanges срабатывает при изменении ссылки на объекты и массивы. Изменение объекта, переданного как входное значение, не запустит этот хук.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Порядок с ngOnInit

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

Сравнение старых и новых значений

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

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Типизация для безопасности

Можно читать значения из changes или непосредственно из свойства компонента; после выполнения ngOnChanges свойство уже содержит текущее значение.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Когда не следует использовать OnChanges

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

Несколько входных значений одновременно

Если несколько входных значений изменяются в одном цикле, ngOnChanges вызывается один раз, а карта SimpleChanges содержит их все.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

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

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

Итоги

Хук OnChanges реагирует на изменения входных значений через карту SimpleChanges со свойствами currentValue, previousValue и firstChange. Он срабатывает при изменении ссылок, поэтому используйте неизменяемые обновления.

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

Урок «ngOnChanges и изменения входных данных» бесплатный?

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

Чему я научусь в уроке «ngOnChanges и изменения входных данных»?

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

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

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

Сколько времени занимает урок «ngOnChanges и изменения входных данных»?

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

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

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

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

← Назад к Angular Academy