Реальные варианты использования ngDoCheck (Angular9)

Я новичок в Angular и обучаюсь самостоятельно, и я застрял в методе жизненного цикла ngDoCheck

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

Родительский компонент:

user={
   name:"xxx"
}

update(){
  this.user.name="yyy"
}

Родительский просмотр:

<button (click)="update">update</button>
<child-comp [inputprop]="user"></child-comp>

Дочерний компонент

ngDoCheck(){
console.log(this.inputprop);
}

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

Проще говоря, ngOnChanges обнаружит изменения свойств, только если ссылка на свойство изменится.

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

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




Ответы (1)


Детектор изменения дочернего компонента может иметь следующие стратегии

  1. дефолт
  2. onPush

В стратегии по умолчанию CD запускается при любых изменениях в оформленных свойствах @Input ().

В стратегии onPush CD запускается, когда вы передаете новый объект (ссылку) в оформленные свойства @Input.

Независимо от стратегии, CD всегда запускается в следующих сценариях:

  1. Событие, такое как click, submit, запускается
  2. Вызов XHR для работы с API
  3. Выполняются асинхронные функции JavaScript, такие как assetTimeOut () или setInterval ().

Имейте в виду, что Angular CD можно визуализировать как направленное дерево, что означает, что все компоненты можно рассматривать как узел в дереве, а Angular всегда запускает CD от корневого узла до конца дерева.

Угловое дерево компонентов

Даже если в CC-121 происходит событие, Angular запускает CD от корневого компонента до самого низа. Однако выполнение CD остановится на узле, где стратегия установлена ​​на onPush, и вы не передаете новый объект в одно из оформленных свойств @Input.

Итак, теперь вы немного понимаете, когда и как запускается компакт-диск, жизненный цикл ngDoCheck () выполняется каждый раз, когда компакт-диск запускается для компонента.

Я надеюсь, что это помогает.

Спасибо

person debugmode    schedule 02.04.2020
comment
Это то, что я понял, CD запускает ngDocheck (). Но какая-то реализация или процесс были выполнены до запуска ngDocheck. Короче говоря, мы правильно получаем последние изменения внутри ngDocheck. Если возможно, соотнесите этот метод с реальным временем. Спасибо, немного разобрался. - person Ram; 02.04.2020
comment
@ debugmode - я все еще не совсем ясен в этом жизненном цикле - person Ram; 05.04.2020
comment
Я понял об обнаружении изменений (CD). Спасибо за это. Итак, CD запускает методы жизненного цикла один за другим. Для объяснения своего сценария я использовал метод жизненного цикла ngOnChange. Метод ngOnChange срабатывает всякий раз, когда изменяется значение входного свойства. Точно так же я прошу этот метод жизненного цикла. Если я не ошибаюсь, внутри этого метода жизненного цикла мы можем получить значение свойства input на более глубоком уровне, как упоминалось в вопросе. Я хочу знать, что именно мы можем сделать с этим методом жизненного цикла. Если я повторяю одно и то же объяснение, пожалуйста, простите меня. - person Ram; 06.04.2020