角度4錯誤：檢查后表達式已更改

Question

我在Angular 4應用程序中使用Angular Material。 當我嘗試在ngAfterViewInit()使用MatSnackBar時，我面臨一個錯誤：

ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后發生了變化。 上一個值：'undefined'。 當前值：'visible-bottom'。看起來該視圖是在其父級及其子級被臟檢查后創建的。 它是在變更檢測鈎子中創建的嗎？

我已經使用ChangeDetectorRef來檢測更改，但它似乎不起作用。

這是我一直在研究的代碼：

   constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) { }

   ngOnInit() {}

   ngAfterViewInit() {
    let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
      duration: 10000
    });

    snackBarRef.onAction().subscribe(() => {
      console.log("Cancelled");
    });


    this.cdr.detectChanges();
  }

請幫我解決這個問題。

Answer 1

一個潛在但原始的解決方案是使用setTimeout -

let snackBarRef;
setTimeout(() => {
    snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
      duration: 10000
    });
});

有關更多信息，請參閱https://github.com/angular/material2/issues/6158 。

Answer 2

嘗試在構造函數中移動snackbar：

constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) {
  let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
    duration: 10000
  });
  snackBarRef.onAction().subscribe(() => {
    console.log("Cancelled");
  });
}