Механизм ChangeDetection

В Angular механизм отслеживания изменений (англ. Change Detection) отвечает за своевременное отображение в шаблоне данных при их изменении и обычно запускается при возникновении событий, выполнении HTTP-запросов или вызове функции setTimeout() или setInterval().

В случае с событиями, Angular расширяет стандартный метод addEventListener(), добавляя после вызова обработчика события вызов отслеживания изменений

Ключевая роль в отслеживании изменений у библиотеки zone.js, которая разделяет все Angular приложение на секторы, каждый из которых запоминает контекст асинхронного выполнения. Такой подход позволяет запускать отслеживание изменений только в месте выполнения асинхронной операции, а не во всем приложении.

Запуск механизма Change Detection в родительском компоненте автоматически инициирует запуск механизма во всех дочерних компонентах.

ChangeDetectionStrategy

Механизм отслеживания изменений может работать согласно одной из двух предопределенных стратегий:

• Default - запускается при любом действии пользователя или изменения состояния компонента;

• OnPush - запускается в момент вызова стадии жизненного цикла компонента OnChanges и при любом изменении значения используемых в шаблоне объектов Observable.

Стратегия задается в свойстве changeDetection объекта конфигурации декоратора @Component() и указывается для каждого компонента отдельно. Если параметр не указан явно - используется стратегия Default.

Стратегия задается с помощью перечисления ChangeDetectionStrategy.

import {Component, DoCheck, ChangeDetectionStrategy} from '@angular/core';

    @Component({
      selector: 'book-item',
      template: `<h1>{{book}}</h1>`,
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class BookItemComponent implements DoCheck{
    
      @Input() book: string = null;
    
      ngDoCheck(){
        console.log('Change Detection');
      }
    }

В приведенном примере механизм Change Detection не будет вызван, например, при клике мыши, но будет запущен при изменении свойства book.

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