Angular 4 错误：检查后表达式已更改答案

【问题标题】：Angular 4 Error: Expression has changed after it was checkedAngular 4 错误：检查后表达式已更改
【发布时间】：2018-05-11 20:15:59
【问题描述】：

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

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改检查后。以前的值：'未定义'。当前值： '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();
  }

请帮我解决这个问题。

【问题讨论】：

您是否尝试在onAction().subscribe(() => {}); 内移动this.cdr.detectChanges();
@AmitChigadani 这行不通！
尝试创建一个工作的 plunker 来复制错误。提供的代码不会有太大帮助。

标签： javascript angular angular-material2

【解决方案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");
  });
}

【讨论】：

【解决方案2】：

一个潜在但粗略的解决方案是使用 setTimeout -

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

请参考https://github.com/angular/material2/issues/6158了解更多信息。

【讨论】：

我已经这样做了。它有效，但我正在寻找检测这些变化的 Angular 方法。
@ProtonStarlight，我试图找出不感兴趣的方法，我发现了 2 种可能的方法，如下所示 - 1. 要使用 ngAfterContentInit 而不是 ngAfterViewInit，请参考 - angular.io/guide/… 2. To在DetectChanges方法之前/结合使用ChangeDetectorRef的分离方法。请注意，我没有亲自使用过这些，但我认为这些可能会有所帮助。
@ProtonStarlight，你有机会查看我的评论吗？
但是AfterContentInit 初始化一个甚至不存在视图的可视元素还为时过早。