请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
Angular会运行更改检测，当它发现传递给子组件的某些值被更改时，Angular会抛出以下错误:
点击查看更多信息
为了纠正这个问题，我们可以使用AfterContentChecked生命周期钩子和
import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';
constructor(
private cdref: ChangeDetectorRef) { }
ngAfterContentChecked() {
this.cdref.detectChanges();
}
其他回答
一旦我理解了Angular生命周期钩子以及它们与变更检测的关系，我就理解了很多。
我试图让Angular更新一个绑定到元素的*ngIf的全局标志，我试图在另一个组件的ngOnInit()生命周期钩子中更改这个标志。
根据文档，这个方法会在Angular检测到变化之后调用:
在第一个ngOnChanges()之后调用一次。
因此，在ngOnChanges()中更新标志不会启动变更检测。然后，一旦变更检测再次自然触发，标志的值就发生了变化，并抛出错误。
在我的例子中，我修改了这个:
constructor(private globalEventsService: GlobalEventsService) {
}
ngOnInit() {
this.globalEventsService.showCheckoutHeader = true;
}
:
constructor(private globalEventsService: GlobalEventsService) {
this.globalEventsService.showCheckoutHeader = true;
}
ngOnInit() {
}
它解决了这个问题:)
以下是我对正在发生的事情的看法。我还没有阅读文档，但我确信这是错误显示的部分原因。
*ngIf="isProcessing()"
当使用*ngIf时，它会在每次条件改变时通过添加或删除元素来物理地改变DOM。因此，如果条件在呈现给视图之前发生了变化(这在Angular的世界中是极有可能的)，就会抛出错误。请参阅开发和生产模式之间的解释。
[hidden]="isProcessing()"
当使用[hidden]时，它不会在物理上改变DOM，而只是从视图中隐藏元素，很可能在后面使用CSS。元素仍然在DOM中，但不可见，这取决于条件的值。这就是为什么使用[hidden]时不会出现错误的原因。
请遵循以下步骤:
1. 通过从@angular/core导入'ChangeDetectorRef'来使用它，如下所示:
import{ ChangeDetectorRef } from '@angular/core';
2. 在constructor()中实现，如下所示:
constructor( private cdRef : ChangeDetectorRef ) {}
3. 添加下面的方法到你的函数，你正在调用的事件，如点击按钮。它看起来是这样的:
functionName() {
yourCode;
//add this line to get rid of the error
this.cdRef.detectChanges();
}
我得到这个错误，因为我在component.html中使用了一个没有在component.ts中声明的变量。一旦我删除了HTML中的部分，这个错误就消失了。
我也遇到过类似的问题。查看生命周期钩子文档，我将ngAfterViewInit更改为ngAfterContentInit，它工作正常。
