Angular Material 使用 ngOnChanges 进行变更检测抛出错误，"ExpressionChangedAfterItHasBeenCheckedError"

Question

我有一个组件的输入属性，我应该只在当前数据未定义时显示。

我正在使用 ngOnChanges 来检测更改，但它抛出“ExpressionChangedAfterItHasBeenCheckedError”错误。

这是代码，

  ngOnChanges(changes: { [propName: string]: SimpleChange}) {
if (changes['message'].currentValue) {
  this.open();
}}


open() {
    let config = new MatSnackBarConfig();
    config.verticalPosition = this.verticalPosition;
    config.horizontalPosition = this.horizontalPosition;
    config.duration = this.setAutoHide ? this.autoHide : 0;
    config.extraClasses = this.addExtraClass ? ['test'] : undefined;
    this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
}

Stackblitz link：https://stackblitz.com/edit/angular-snackbar-top-bdmsmz

有什么方法可以解决这个错误。

Answer 1

这是与 Angular 的生命周期事件相关的问题。

一种快速修复方法是将行为异常的代码（在本例中为 snackBar.open 调用包装在 setTimeout 函数中

setTimeout(()=>{
  this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
})

Demo

Answer 2

错误是这样发生的：

    ngOnChanges(changes: { [propName: string]: SimpleChange}) {
        setTimeout(()=>{
      if (changes['message'].currentValue) {
          this.open();
        }
        })
      }

Angular Material 使用 ngOnChanges 进行变更检测抛出错误，"ExpressionChangedAfterItHasBeenCheckedError"

Angular Material Change Detection using ngOnChanges throwing error, "ExpressionChangedAfterItHasBeenCheckedError"

angular-material

angular

angular5

angular6

angular-changedetection