Угловое обнаружение изменения материала с использованием ошибки выброса 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);
}

Ссылка на стек: https://stackblitz.com/edit/angular-snackbar-top-bdmsmz

Есть ли способ устранить ошибку.

Answer 1

Ошибка идет таким образом:

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

Answer 2

Это проблема, связанная с событиями жизненного цикла Angular.

Один быстрый способ исправить это - обернуть некорректно работающий код, который в данном случае является вызовом snackBar.open, в setTimeout функцию

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

Демо