Question

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

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

尝试在构造函数中移动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");
  });
}

Answer 2

一个潜在但原始的解决方案是使用setTimeout -

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

请参阅https://github.com/angular/material2/issues/6158了解详情。

Angular 4 Error：检查后表达式发生了变化

2 个答案: