Angular 表达式ChangedTerithasBeenCheckedError`错误角度4

我正在尝试一个有多个组件的项目。示例应用程序是。我在开发模式中遇到如下错误

我知道为什么会出现这个错误

因为在绑定子组件值之后，父组件 值由祖父母组件更新，导致 角度脏检时出错

---

我的应用程序的框架是。有人能帮我解决这个问题吗。我知道可以通过使用setTimeout或changeDetectionRef来解决这个问题。但这不是我正在寻找的解决方案，我想知道在生命周期中我做错了什么。提前感谢。

很高兴听到您反对

setTimeout

和手动调用

detectChanges

我知道这在你的应用程序结构中是显而易见的，但下面是一个示例，向你展示了错误的来源：

因为在绑定子组件值之后，父组件 值由祖父母组件更新，导致 角度脏检时出错

似乎您是对的，您的子组件是在ngAfterContentInit发生之前呈现的

角度应用程序是视图树。当angular运行更改检测机制时，它会遍历此视图树，并为每个视图调用函数

在执行此函数的过程中，angular按严格定义的顺序调用其他函数。在我们的情况下，我们具备以下功能：

execEmbeddedViewsAction
callLifecycleHooksChildrenFirst (AfterContentInit)
execComponentViewsAction

这意味着angular将在执行

ngAfterContentInit

hook之前调用嵌入式视图的更改检测周期（

ng template

生成嵌入式视图）。这就是您的示例中发生的情况：

正如我们在上图中看到的，当angular检查AppComponent视图时，它首先检查嵌入式视图，然后调用

ngAfterContentInit

以查看

祖父母组件

，然后转到

祖父母组件

视图

似乎有很多方法可以解决这个问题。我在这个

关键时刻不是使用

ngAfterContentInit

hook，而是在

ParentComponent

中设置索引和活动值：

parent.component.ts

导出类ParentComponent{
private _active:boolean=false；
公共指数=0；
建造师(
@Host（）@Inject（forwardRef（（）=>祖父母组件））
公共祖父母组件：祖父母组件）{
this.index=this.grandrentcomponent.parents.length；
this.grandrentcomponent.parents.push（this）
}
恩戈尼尼特（）{
this.active=this.index==this.grandrentcomponent.currentStep；
}
恩贡德斯特罗（）{
if（此.祖父母组件）{
this.grandrentcomponent.parents=this.grandrentcomponent.parents.filter（x=>x！==this）；
}
}

其中父属性已在

祖父母组件中声明：

祖父母.component.ts

导出类组件{
父母=[]；
谢谢你的详细回答..真的帮助了我的理解：）只是一个后续问题，…如果我必须在如下设置活动步骤之前检查一个条件，…既然非初始状态中的父母可以将
长度
或整个
obj
传递给祖父母，我该怎么做呢randparent负责通过
ng内容
呈现未经转换的子项。如果您想在这种情况下提供模板，则可以将
ng模板
与ngTemplateOutlet指令一起使用