Как директива ngIf изменяет цикл обнаружения изменений?

Question

Пример Stackblitz: https://stackblitz.com/edit/ngif-detectionchange

У меня есть testToggle компонент, который может изменить свою высоту из-за привязки к некоторому свойству внутри него.У него есть родственный testParent компонент, который является гибким, чтобы взять остаток высоты, и у него есть дочерний testChild компонент, который имеет привязку к testParent высоте.Когда testParent имеет директиву * ngIf с истинным выражением, когда testToggle изменяет свойство, привязанное к его высоте, я получаю:

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.

После регистрации порядка компонентов подключения жизненного цикла я обнаружил нечто странное:

No ngIf used                              testParent has ngIf with expression true

testToggle: DoCheck                       testToggle: DoCheck
testParent: DoCheck                       testParent: DoCheck
testToggle: AfterContentChecked           testParent: AfterContentChecked
testParent: AfterContentChecked              testChild: DoCheck
   testChild: DoCheck                        testChild: AfterContentChecked
   testChild: AfterContentChecked            testChild: AfterViewChecked
   testChild: AfterViewChecked            testParent: AfterViewChecked
testToggle: AfterViewChecked              testToggle: AfterContentChecked
testParent: AfterViewChecked              testToggle: AfterViewChecked

Видимо, правильный пример throw ExpressionChanged, поскольку весь цикл testParent завершился до того, как testToggle смог обновить свою привязку(это изменило бы его высоту и, следовательно, изменило бы testParent высоту).

Я хотел бы знать, почему компонент, который добавляется динамически с помощью ngIf, завершает весь свой жизненный цикл, прежде чем он продолжает нормально проходить через дерево компонентов?