请向我解释为什么我一直得到这个错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已经改变后，它被检查。
显然，我只有在开发模式下才会遇到这种情况，在我的产品构建中不会出现这种情况，但这非常烦人，而且我根本不明白在我的开发环境中出现错误而不会在prod上显示的好处——可能是因为我缺乏理解。
通常，修复很简单，我只是把导致错误的代码包装在setTimeout中，就像这样:
setTimeout(()=> {
this.isLoading = true;
}, 0);
或者使用如下构造函数强制检测更改:
this.isLoading = true;
this.cd.detectChanges();
但是为什么我总是遇到这个错误呢?我想要了解它，这样我就可以在将来避免这些俗套的修复。
当前回答
有一些有趣的答案，但我似乎没有找到一个符合我的需求，最接近的是来自@chittrang-mishra，它只指一个特定的功能，而不是像我的应用程序中那样有几个切换。
我不想使用[隐藏]利用*ngIf甚至不是DOM的一部分，所以我找到了以下解决方案，这可能不是最好的，因为它抑制错误而不是纠正它，但在我的情况下，我知道最终结果是正确的，这似乎对我的应用程序是可以的。
我所做的是实现AfterViewChecked，添加构造函数(私有changeDetector: ChangeDetectorRef){}，然后
ngAfterViewChecked(){
this.changeDetector.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改成[hidden]
<app-loading *ngIf="isLoading"></app-loading>
to
<app-loading [hidden]="!isLoading"></app-loading>
我得到这个错误，因为我在模式中调度redux动作，当时模式还没有打开。我正在调度动作的瞬间模态组件接收输入。所以我把setTimeout放在那里，以确保模式是打开的，然后动作被分派。
@HostBinding可能是这个错误的一个令人困惑的来源。
例如，假设您在组件中有以下主机绑定
// image-carousel.component.ts
@HostBinding('style.background')
style_groupBG: string;
为了简单起见，我们假设这个属性是通过以下输入属性更新的:
@Input('carouselConfig')
public set carouselConfig(carouselConfig: string)
{
this.style_groupBG = carouselConfig.bgColor;
}
在父组件中，你通过编程方式在ngAfterViewInit中设置它
@ViewChild(ImageCarousel) carousel: ImageCarousel;
ngAfterViewInit()
{
this.carousel.carouselConfig = { bgColor: 'red' };
}
事情是这样的:
Your parent component is created The ImageCarousel component is created, and assigned to carousel (via ViewChild) We can't access carousel until ngAfterViewInit() (it will be null) We assign the configuration, which sets style_groupBG = 'red' This in turn sets background: red on the host ImageCarousel component This component is 'owned' by your parent component, so when it checks for changes it finds a change on carousel.style.background and isn't clever enough to know that this isn't a problem so it throws the exception.
一种解决方案是在ImageCarousel内部引入另一个包装器div，并在其上设置背景颜色，但这样就无法获得使用HostBinding的一些好处(例如允许父类控制对象的完整边界)。
在父组件中，更好的解决方案是在设置配置之后添加detectChanges()。
ngAfterViewInit()
{
this.carousel.carouselConfig = { ... };
this.cdr.detectChanges();
}
这看起来很明显，和其他答案很相似，但有细微的区别。
考虑这样一种情况，您直到开发的后期才添加@HostBinding。突然你得到这个错误，它似乎没有任何意义。
更新
我强烈建议首先从OP的自我响应开始:适当地考虑在构造函数中可以做什么，而在ngOnChanges()中应该做什么。
原始
这与其说是一个答案，不如说是一个题外话，但它可能会帮助到一些人。当我试图让按钮的存在取决于表单的状态时，我偶然发现了这个问题:
<button *ngIf="form.pristine">Yo</button>
据我所知，这种语法会导致根据条件从DOM中添加和删除按钮。这又会导致ExpressionChangedAfterItHasBeenCheckedError。
在我的案例中，解决方案(尽管我没有声称掌握了差异的全部含义)是使用display: none来代替:
<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>
