Angular 4: разница между ngDoCheck и ngAfterViewChecked

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

interface DoCheck {
    ngDoCheck(): void; 
}

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

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

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

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

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

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

это огромная разница:

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

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

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

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

1) ngOnChanges ()

2) ngOnInit ()

3) ngDoCheck ()

4) ngAfterContentInit ()

5) ngAfterContentChecked ()

6) ngAfterViewInit ()

7) ngAfterViewChecked ()

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

ngDoCheck

Detect and act upon changes that Angular can't or won't detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterViewChecked ()

Respond after Angular checks the component's views and child views / the view that a directive is in.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

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

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