Угловой 4: разница между ngDoCheck и ngAfterViewChecked

Question

В Angular 2+ ngDoCheck и ngAfterViewChecked, кажется, выполняют одну и ту же функцию. ngDoCheck называется вызванным всякий раз, когда обнаруживается изменение. Теперь это обнаружение изменений будет вызвано изменением в представлении. Согласно документам, ngAfterViewChecked вызывается всякий раз, когда вид меняется.

Зачем здесь нужны два крючка жизненного цикла, когда одного было достаточно?

Answer 1

Существует огромная разница:

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

ngAfterViewChecked вызывается только после проверки привязок дочерних элементов представления (это относится только к представлению).

Answer 2

DoCheck Hook позволяет интегрироваться в цикл обнаружения изменений и находить изменения в ссылках на объекты или в любых областях, где Angular не обнаруживает изменения автоматически. Интерфейс выглядит следующим образом:

interface DoCheck {
    ngDoCheck(): void; 
}

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

При использовании свойств типа объекта Angular будет наблюдать за изменениями по ссылке на значение, то есть обнаруживает изменение всего значения, но не изменений дочерних свойств. Это тот случай, когда мы собираемся использовать DoCheck перехватить жизненный цикл и обнаружить изменения в объекте.

ngAfterViewChecked метод представляет AfterViewChecked Хук жизненного цикла и интерфейс. Это позволяет вам настраивать отслеживание изменений, которое не обрабатывается Angular по какой-либо причине. Поведение аналогично ловушке AfterContentChecked, но применяется к дочерним шаблонам представления, а не к проецируемому содержимому.

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

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

Надеюсь, это поможет!!!

Answer 3

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

Вот полная последовательность циклов

1) ngOnChanges ()

2) ngOnInit ()

3) ngDoCheck ()

4) ngAfterContentInit ()

5) ngAfterContentChecked ()

6) ngAfterViewInit ()

7) ngAfterViewChecked ()

Из официальной документации

ngDoCheck

Обнаруживать и реагировать на изменения, которые Angular не может или не сможет обнаружить самостоятельно.

Вызывается во время каждого запуска обнаружения изменений, сразу после ngOnChanges () и ngOnInit ().

ngAfterViewChecked ()

Отвечать после Angular проверяет представления компонента и дочерние представления / представление, в котором находится директива.

Вызывается после ngAfterViewInit и каждого последующего ngAfterContentChecked ().

Для получения дополнительной информации: https://blog.angularindepth.com/if-you-think-ngdocheck-means-your-component-is-being-checked-read-this-article-36ce63a3f3e5

Answer 4

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