在使用角度组件时ExpressionChangedAfterItHasBeenCheck错误

Question

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

<INPUT [p]=" '' ">

C作为子下拉菜单在INPUT之后追加。

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

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

Answer 1

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

1. 更新所有子组件/指令的绑定属性
2. 在所有子组件/指令上调用ngOnInit，OnChanges和ngDoCheck生命周期挂钩
3. 更新当前组件的DOM
4. 对子组件运行更改检测
5. 为所有子组件/指令调用ngAfterViewInit生命周期挂钩

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

因此，最后，我们需要使其与Angular同步，并通过生命周期挂钩内的setTimeout来解决它。

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