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

Question

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

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

Answer 1

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

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

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

Answer 2

Это оба угловых крюка жизненного цикла .И это интерфейсы из базовой библиотеки 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 3

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

interface DoCheck {
    ngDoCheck(): void; 
}

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

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

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

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

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

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