调试技巧

这个错误可能非常令人困惑，而且很容易对它发生的确切时间做出错误的假设。我发现在受影响的组件的适当位置添加大量这样的调试语句很有帮助。这有助于理解流程。

在父类的put语句中(确切的字符串'EXPRESSIONCHANGED'很重要)，但除此之外，这些只是例子:

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

在子/ services / timer回调函数中:

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

如果你手动运行detectChanges，添加日志记录:

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

然后在Chrome调试器只是过滤'EXPRESSIONCHANGES'。这将显示所有设置的流程和顺序，以及Angular抛出错误的确切位置。

您还可以单击灰色链接来放入断点。

另一件需要注意的事情是，如果你在整个应用程序中都有类似命名的属性(比如style.background)，请确保你正在调试你认为你在调试的属性——通过将它设置为一个模糊的颜色值。

一旦我理解了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() {

}

它解决了这个问题:)

setTimeout或delay(0)如何解决这个问题?

以下是上面的代码修复问题的原因:

The initial value of the flag is false, and so the loading indicator will NOT be displayed initially

ngAfterViewInit() gets called, but the data source is not immediately called, so no modifications of the loading indicator will be made synchronously via ngAfterViewInit()

Angular then finishes rendering the view and reflects the latest data changes on the screen, and the Javascript VM turn completes

One moment later, the setTimeout() call (also used inside delay(0)) is triggered, and only then the data source loads its data

the loading flag is set to true, and the loading indicator will now be displayed

Angular finishes rendering the view, and reflects the latest changes on the screen, which causes the loading indicator to get displayed

这一次没有发生错误，因此这修复了错误消息。

来源:https://blog.angular-university.io/angular-debugging/

@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。突然你得到这个错误，它似乎没有任何意义。

当值在同一个更改检测周期中更改多次时，将发生此错误。我在一个TypeScript getter中遇到了这个问题，它的返回值经常变化。要解决这个问题，您可以限制一个值，使其在每个更改检测周期中只能更改一次，如下所示:

import { v4 as uuid } from 'uuid'

private changeDetectionUuid: string
private prevChangeDetectionUuid: string
private value: Date

get frequentlyChangingValue(): any {
  if (this.changeDetectionUuid !== this.prevChangeDetectionUuid) {
    this.prevChangeDetectionUuid = this.changeDetectionUuid
    this.value = new Date()
  }
  return this.value
}

ngAfterContentChecked() {
  this.changeDetectionUuid = uuid()
}

HTML:

<div>{{ frequentlyChangingValue }}</div>

这里的基本方法是每个变更检测周期都有自己的uuid。当uuid改变时，您就知道您已经进入了下一个循环。如果循环已经改变，则更新值并返回它，否则只需返回与之前在此循环中返回的值相同的值。

这确保每个循环只返回一个值。这对于频繁更新值很有效，因为更改检测周期发生得非常频繁。

为了生成uuid，我使用了uuid npm模块，但你可以使用任何方法来生成唯一的随机uuid。

我面临着同样的问题，因为我的组件中的一个数组的值发生了变化。但是我没有检测值变化的变化，而是将组件变化检测策略改为onPush(它将检测对象变化的变化，而不是值变化的变化)。

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})