Question

我有一个错误ExpressionChangedAfterItHasBeenCheckedError。 Plunk：http://plnkr.co/edit/XKfHDAzuhjAhVvbQOpsW?p=preview

我找到了解释：

https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked

但是如果没有ngAfterViewInit中的setTimeout，我不知道如何正确解决这个问题。

问题出在this.message变量上。 +与ngAfterViewChecked相同的问题。有没有BehaviorSubject的修复程序？

Answer 1

您正在使用模板中message组件的Child属性：

@Component({
  selector: 'child-cmp',
  template: `
    <div>{{ message }}<input></div>`,
})
export class Child

Angular运行更改child组件的检测（检查）并更新DOM。然后它会记住它用于更新DOM的值。在验证步骤中将使用此值来检查绑定是否未更改。问题是您在ngAfterViewInit生命周期钩子中更改了该值，并且在检查child组件后触发此挂钩。因此，当Angular运行组件验证时，它注意到值不同。所以它抛出错误。 Angular需要在检查阶段和验证阶段之间进行额外的变更检测。

如果您确实需要更新ngAfterViewInit生命周期钩子中的值，异步使用它或对子组件运行更改检测。两者都很糟糕。考虑更改应用程序设计。

请参阅Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error文章，其中详细说明了错误原因和可能的修复方法。

Answer 2

需要在所有this.ref.detectChanges();类型func。

上添加ngAfterViewChecked

Angular v4.3.0中的ExpressionChangedAfterItHasBeenCheckedError

2 个答案: