使用ngOnChanges投擲錯誤“ ExpressionChangedAfterItHasBeenCheckedError”進行角度材料更改檢測

Question

我具有組件的Input屬性，並且僅在當前數據未定義的情況下才顯示。

我正在使用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鏈接： https ：//stackblitz.com/edit/angular-snackbar-top-bdmsmz

有什么辦法可以解決該錯誤。

Answer 1

這是與Angular的生命周期事件有關的問題。

解決該問題的一種快速方法是將行為不當的代碼包裝在setTimeout函數中，在本例中，該代碼是snackBar.open調用

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

演示版

Answer 2

錯誤以這種方式進行：

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