2

Stackblitz 示例：https ://stackblitz.com/edit/ngif-detectionchange

testToggle由于绑定到其中的某些属性，我有可以更改其高度的组件。它有兄弟testParent组件，它是 flex 以获取其余高度，并且它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

显然，正确的示例抛出 ExpressionChanged，因为整个testParent周期已经结束，之前testToggle可以更新它的绑定（这会改变它的高度，因此改变testParent高度）。

我想知道为什么使用 ngIf 动态添加的组件在通过组件树正常继续之前完成其整个生命周期？

4

0 回答 0