Автоматические обновления

Angular реализует двустороннюю реактивность данных через систему Change Detection, которая автоматически отслеживает изменения и обновляет DOM без ручного вмешательства.

Механизм работы

  1. Зона Angular (NgZone) — отслеживает события браузера, таймеры, промисы и другие асинхронные операции.
  2. Change Detector — при срабатывании события проверяет компоненты и директивы на изменения состояния.
  3. Рендеринг — только изменившиеся части DOM обновляются, что обеспечивает высокую производительность.

Пример автоматического обновления с использованием ngModel:

<input [(ngModel)]="username" placeholder="Введите имя">
<p>Привет, {{username}}!</p>

Здесь любое изменение значения username автоматически отображается в <p> без дополнительных обработчиков событий.

Change Detection стратегии

  • Default — проверяются все компоненты от корня до листьев при каждом событии.
  • OnPush — проверка только при изменении входных данных (@Input) или событиях внутри компонента. Позволяет оптимизировать производительность.

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

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{user.name}}</p>`
})
export class UserComponent {
  @Input() user: { name: string };
}

В этом режиме компонент обновляется только если объект user изменится на новый экземпляр, что снижает количество проверок.

Асинхронные потоки и автоматическое обновление

Angular поддерживает обновление через Observables:

@Component({
  selector: 'app-clock',
  template: `<p>Текущее время: {{time$ | async}}</p>`
})
export class ClockComponent {
  time$ = interval(1000).pipe(map(() => new Date().toLocaleTimeString()));
}
  • Pipe async подписывается на поток данных и автоматически обновляет шаблон при каждом новом значении.
  • Отписка выполняется автоматически при уничтожении компонента.

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

Оглавление