当组件属性取决于当前日期时间时，如何管理Angular2“检查后表达式已更改”异常

Question

我的组件具有依赖于当前日期时间的样式。在我的组件中，我有以下功能。

  private fontColor( dto : Dto ) : string {
    // date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmp 从当前日期时间计算。如果dtoDate 在过去 24 小时内，颜色会发生变化。

确切的错误如下：

表达式在检查后发生了变化。以前的值：'hsl(123, 80%, 49%)'。当前值：'hsl(123, 80%, 48%)'

我知道只有在检查值时才会在开发模式下出现异常。如果检查的值与更新的值不同，则抛出异常。

所以我尝试在下面的钩子方法中更新每个生命周期的当前日期时间以防止异常：

  ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

...但没有成功。

Answer 1

更改后显式运行更改检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

Answer 2

TL;DR

ngAfterViewInit() {
    setTimeout(() => {
        this.dateNow = new Date();
    });
}

虽然这是一种解决方法，但有时很难以任何更好的方式解决此问题，所以如果您正在使用这种方法，请不要责怪自己。没关系。

示例：最初的问题 [link]，用 setTimeout() 解决 [link]

---

如何避免

通常，此错误通常发生在您添加某处（甚至在父/子组件中）ngAfterViewInit 之后。所以第一个问题是问自己——没有ngAfterViewInit我还能活吗？也许您将代码移动到某处（ngAfterViewChecked 可能是替代方案）。

示例：[link]

---

还有

ngAfterViewInit 中影响 DOM 的异步内容也可能导致此问题。也可以通过setTimeout 或在管道中添加delay(0) 运算符来解决：

ngAfterViewInit() {
  this.foo$
    .pipe(delay(0)) //"delay" here is an alternative to setTimeout()
    .subscribe();
}

示例：[link]

---

阅读愉快

关于如何调试以及为什么会发生这种情况的好文章：link

Answer 3

正如@leocaseiro 在github issue 上提到的那样。

我为那些正在寻找简单修复的人找到了 3 个解决方案。

1) 从ngAfterViewInit 移动到ngAfterContentInit

2) 移动到 ngAfterViewChecked 与 ChangeDetectorRef 结合为 建议在 #14748（评论）

3) 继续使用 ngOnInit() 但在之后调用 ChangeDetectorRef.detectChanges() 您的更改。

Answer 4

我认为你能想象到的最好和最干净的解决方案是这样的：

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

使用 Angular 5.2.9 测试

Answer 5

一个我用过很多次的小作品

Promise.resolve(data).then(() => {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
    this.cdRef.detectChanges();
});

Answer 6

这里有两个解决方案！

---

1。将 ChangeDetectionStrategy 修改为 OnPush

对于这个解决方案，你基本上是在告诉 Angular：

停止检查更改；只有在我知道有必要的时候才会这样做

修改您的组件，使其使用ChangeDetectionStrategy.OnPush，如下所示：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
    // ...
}

有了这个，事情似乎不再起作用了。那是因为从现在开始，您必须让 Angular 手动调用 detectChanges()。

this.cdr.detectChanges();

如果您有兴趣，请查看this article。它帮助我了解了ChangeDetectionStrategy 的工作原理。

---

2。了解 ExpressionChangedAfterItHasBeenCheckedError

这是来自this article 的关于此错误原因的一小段摘录，我已尝试仅包含有助于我理解这一点的部分。

完整的文章展示了关于此处显示的每一点的真实代码示例。

根本原因是角度生命周期的：

在每次操作之后，Angular 都会记住它曾经执行过的值 一个手术。它们存储在 组件视图。

在对所有组件进行检查之后，Angular 就会启动 下一个摘要循环，但不是执行操作，而是将当前值与它记住的值进行比较 上一个摘要循环。

在摘要周期检查以下操作：

检查传递给子组件的值是否与 将用于更新这些组件的属性的值 现在。

检查用于更新 DOM 元素的值是否与 将用于更新这些元素的值现在执行 一样。

检查所有子组件

因此，当比较的值不同时会引发错误。，博主Max Koretskyi 表示：

罪魁祸首总是子组件或指令。

最后是一些通常会导致此错误的实际示例：

• 共享服务 (example)
• 同步事件广播 (example)
• 动态组件实例化 (example)

在我的例子中，问题是动态组件实例化。

另外，根据我自己的经验，我强烈建议大家避免使用setTimeout 解决方案，在我的情况下会导致“几乎”无限循环（21 个调用，我不愿意向您展示如何激怒它们），

我建议始终牢记 Angular 生命周期，这样您就可以考虑每次修改另一个组件的值时它们会受到怎样的影响。 Angular 告诉你这个错误：

你可能做错了，你确定你是对的吗？

同样的博客还说：

通常，解决方法是使用正确的更改检测挂钩来创建动态组件

---

对我来说，一个简短的指南是在编码时至少考虑以下事项：

（我会随着时间的推移尝试补充它）：

1. 避免从其子组件修改父组件值， 而是：从它们的父级修改它们。
2. 当您使用 @Input 和 @Output 指令时，请尽量避免触发生命周期更改，除非组件已完全初始化。
3. 避免不必要的this.cdr.detectChanges(); 调用，它们会触发更多错误，尤其是在处理大量动态数据时
4. 当必须使用this.cdr.detectChanges(); 时，请确保正在使用的变量 (@Input, @Output, etc) 在正确的检测挂钩 (OnInit, OnChanges, AfterView, etc) 处填充/初始化
5. 如果可能，remove rather than hide，这与第 3 点和第 4 点有关。（更新：我今天注意到 Angular 建议删除而不是隐藏已从他们的网页中删除，here's the same quote but for angulardart）
6. 避免在setters 中使用@Input 注释的任何类型的逻辑，setter 在ngAfterViewInit 之前执行，因此很容易触发问题。

还有

如果你想全面了解 Angular Life Hook，我建议你阅读这里的官方文档： https://angular.io/guide/lifecycle-hooks

Answer 7

在我们的例子中，我们通过在组件中添加changeDetection并在ngAfterContentChecked中调用detectChanges()来修复，代码如下

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

Answer 8

虽然已经有很多答案和一篇非常好的关于变更检测的文章的链接，但我想在这里给我两分钱。我认为检查是有原因的，所以我考虑了我的应用程序的架构，并意识到可以通过使用 BehaviourSubject 和正确的生命周期挂钩来处理视图中的更改。所以这就是我为解决方案所做的。

• 我使用第三方组件（fullcalendar)，但我也使用Angular Material，所以虽然我制作了一个新的样式插件，但获得外观和感觉有点尴尬，因为日历标题的自定义不是无需分叉回购并自行滚动即可。

• 所以我最终得到了底层的 JavaScript 类，并且需要为组件初始化我自己的日历标题。这需要在渲染我的父级之前渲染 ViewChild，这不是 Angular 的工作方式。这就是我将模板所需的值包装在 BehaviourSubject<View>(null) 中的原因：

  calendarView$ = new BehaviorSubject<View>(null);
  

接下来，当我可以确定视图已被选中时，我会使用来自 @ViewChild 的值更新该主题：

  ngAfterViewInit(): void {
    // ViewChild is available here, so get the JS API
    this.calendarApi = this.calendar.getApi();
  }

  ngAfterViewChecked(): void {
    // The view has been checked and I know that the View object from
    // fullcalendar is available, so emit it.
    this.calendarView$.next(this.calendarApi.view);
  }

然后，在我的模板中，我只使用async 管道。没有更改检测的黑客攻击，没有错误，工作顺利。

如果您需要更多详细信息，请随时询问。

Answer 9

使用默认的表单值来避免错误。

我没有使用在 ngAfterViewInit() 中应用 detectChanges() 的公认答案（这也解决了我的错误），而是决定为动态需要的表单字段保存默认值，以便当表单稍后更新，如果用户决定更改表单上会触发新必填字段的选项（并导致提交按钮被禁用），则其有效性不会更改。

这在我的组件中节省了一小部分代码，并且在我的情况下完全避免了错误。

Answer 10

我收到了这个错误，因为我声明了一个变量，后来又想
使用ngAfterViewInit 更改了它的值

export class SomeComponent {

    header: string;

}

解决我切换的问题

ngAfterViewInit() { 

    // change variable value here...
}

到

ngAfterContentInit() {

    // change variable value here...
}

Answer 11

将您的代码从 ngAfterViewInit 移动到 ngAfterContentInit。

视图在内容之后初始化，因此在 ngAfterContentInit() 之后调用 ngAfterViewInit()