ExpressionChangedAfterItHasBeenCheck 使用 Angular 组件时出错答案

【问题标题】：ExpressionChangedAfterItHasBeenCheck Error in using Angular ComponentExpressionChangedAfterItHasBeenCheck 使用 Angular 组件时出错
【发布时间】：2018-06-03 17:59:28
【问题描述】：

我在我的 Angular 应用程序中创建了一个日期选择器组件。当我在 *ngIf 中使用它时，出现错误 ExpressionChangedAfterItHasBeenCheck。让，我正在使用两个组件 P 和 C。 P 作为父输入字段。

<INPUT [p]=" '' ">

在 INPUT 之后附加 C 作为子下拉列表。

<DIV>
// drop-down code
</DIV>

在 *ngIf 中动态创建 P 时，出现 ExpressionChangedAfterItHasBeenCheck 这样的错误。

【问题讨论】：

标签： angular components lifecycle

【解决方案1】：

一个正在运行的 Angular 应用程序是一个组件树。在变更检测期间，Angular 会对每个组件进行检查，这些组件包括按指定顺序执行的以下操作：

更新所有子组件/指令的绑定属性
在所有子节点上调用 ngOnInit、OnChanges 和 ngDoCheck 生命周期挂钩组件/指令
更新当前组件的 DOM
为子组件运行更改检测
为所有孩子调用 ngAfterViewInit 生命周期钩子组件/指令

在每次操作之后，Angular 都会记住它用来执行操作的值。它们存储在组件视图的 oldValues 属性中。在对所有 Angular 组件进行检查之后。

所以最后，我们需要让它与 Angular 同步并解决它，我们使用setTimeout inside lifecycle hooks.

ngOnInit() {
    setTimeout(() => {
    // Your Code
    });
}
ngAfterViewInit() {
    setTimeout(() => {
    // Your Code
    });
}

【讨论】：

setTimeout 感觉超级乱，有什么替代方法吗？
@uex 然后你可以使用 zone.js 回调。
谢谢，为了方便测试，我决定使用ChangeDetectorRef的detectChanges函数。