В чем разница между OnChanges и DoCheck в Angular 2?

Ответ 1

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

• ngDoCheck() (DoCheck) вызывается при запуске обнаружения изменений, чтобы вы могли реализовать свое собственное действие обнаружения изменений.

Ответ 2

Я играл с этими двумя и нашел некоторые интересные вещи, которыми стоит поделиться:

ngDoCheck():

Это будет вызываться каждый раз, когда вызывается один из хуков Зоны,

Как?

Angular2 использует NgZone, который, как сказал и @Gunter, обезьяной пропатчил все асинхронные события внутри браузера, вы можете думать об этом как;

var originalTimeout = window.setTimeout;
window.setTimeout = function(callback,time) {
    originalTimeout(callback,time);

    // notify Angular that a setTimeout is fired
    // e.g run ngDoCheck() for components
}

Таким образом, каждый раз, когда вы запускаете setTimeout, вы на самом деле вызываете вышеуказанную функцию, которая обезьяна исправляет исходный setTimeout.

Отказ от ответственности: Приведенный выше код является абсолютно абстрактным, и в Zonejs вы его не найдете, но я просто хотел как-то показать, что это значит, когда они говорят: "Zone пропатчил все асинхронные функции и в них есть хуки";

В любом случае, поэтому каждый раз, когда вы запускаете setTimeout (или любую другую асинхронную функцию), когда она завершается, ngDoCheck.

Таким образом, это означает, что angular просто проверяет, было ли изменение модели или какого-либо из @inputs или нет.

Когда это удобно?

ngDoCheck становится удобным, если ваш компонент ChangeDetectionStrategy имеет значение OnPush, что означает, что он будет обновлять представление только в случае изменения какой-либо из ссылок @Inputs.

Какие есть случаи, когда вы хотите использовать OnPush, но вы хотите выполнять ручное обновление при каждой проверке.

Проверьте этот поршень.

Вы обнаружите, что даже если ChangeDetectionStrategy компонента on-push-test имеет значение OnPush, когда мы markForCheck по мутированному продукту, а это изменяет список продуктов, я буду запускать markForCheck внутри ngDoCheck и обновлять представление после фиктивной ngDoCheck if состояние.

Так что это означает, что эта функция будет называться много! так что будьте осторожны с тем, что вы вкладываете внутрь.

Итак, вкратце:

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

ngOnChanges

Это будет вызываться только и только в том случае, если в какой-либо из привязок @Inputs произошла смена ссылки, независимо от ChangeDetectionStrategy компонента.

Так что, если мы мутируем массив продуктов следующим образом:

this.foods.push({value: 'steak-3', viewValue: 'Fish'});

ngOnChanges не будет вызван, но если мы обновим ссылку следующим образом:

this.foods = [{value: 'steak-3', viewValue: 'Fish'}];

Это будет называться.

Ответ 3

Прежде всего, прислушайтесь к приведенным выше ответам. Я добавляю прецедент для обеих функций, с которыми я столкнулся лично.

ngOnChanges() (OnChanges): для обнаружения изменений для переменных, передаваемых значением

ngDoCheck() (DoCheck): для обнаружения изменений для переменной, переданной по ссылке, например arrays, которые не определены ngOnChanges(), поскольку старое значение и новое значение имеют одинаковую ссылку

Ответ 4

ngDoCheck Вызывается в дочернем компоненте при проверке родительского компонента.
ngOnChanges Он запускается каждый раз, когда Angular обнаруживает изменение входного свойства с привязкой к данным.
ngOnChanges не ngOnChanges, когда входное свойство является массивом/объектом, потому что Angular использует грязную проверку для сравнения свойств.
ngOnCheck срабатывает, когда входное свойство представляет собой массив/объект, такой как класс клиента и т.д.