javascript - Angular 4 错误 : Expression has changed after it was checked

Question

我在 Angular 4 应用程序中使用 Angular Material。当我尝试在 ngAfterViewInit() 中使用 MatSnackBar 时，我遇到了一个错误:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'visible-bottom'.It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

我已经使用 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获取更多信息。