Чем отличаются ChangeDetectorRef.markForCheck() и detectChanges()? Как они распространяют проверку по дереву компонентов?

В Angular change detection — это процесс, при котором фреймворк сравнивает текущие значения в шаблоне с предыдущими и обновляет DOM. По умолчанию используется стратегия Default, при которой проверяются все компоненты при каждом событии. Стратегия OnPush ограничивает проверку: компонент проверяется только при изменении @Input по ссылке, при событии внутри самого компонента или при явном вызове методов ChangeDetectorRef.

Что делает markForCheck()

Метод markForCheck() не запускает проверку немедленно. Он помечает текущий компонент и всех его предков как «грязные» (dirty), чтобы при следующем цикле change detection они были проверены, даже если у них стратегия OnPush. Это удобно, когда данные приходят извне (например, из подписки на Observable или setTimeout) и нужно сообщить Angular, что представление устарело.

Что делает detectChanges()

Метод detectChanges() синхронно и немедленно запускает проверку текущего компонента и всех его дочерних компонентов. Он не поднимается вверх по дереву и не помечает предков. Это локальная операция, которая полезна, когда нужно обновить представление прямо сейчас, не дожидаясь следующего цикла.

Пример использования

@Component({
  selector: 'app-counter',
  template: `{{ value }}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  value = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  updateFromOutside() {
    this.value++;
    // Планируем проверку на следующем цикле
    this.cdr.markForCheck();
  }

  updateNow() {
    this.value++;
    // Немедленно проверяем этот компонент и детей
    this.cdr.detectChanges();
  }
}

Ключевые различия

• markForCheck() — асинхронный по эффекту: помечает дерево, проверка произойдёт в следующем цикле.
• detectChanges() — синхронный: проверка выполняется сразу, только для текущего компонента и потомков.
• markForCheck() распространяется вверх к корню, detectChanges() — вниз к листьям.
• detectChanges() может вызывать ошибки ExpressionChangedAfterItHasBeenChecked, если использовать неаккуратно.

Итог: markForCheck() применяйте, когда нужно сообщить Angular об изменении данных в OnPush-компоненте и дождаться следующего цикла; detectChanges() — когда требуется немедленное локальное обновление представления, например, при интеграции с внешними библиотеками.