Material snackbar 的 Angular 误差

在我的angular 4项目中，我实现了一些MatSnackbar
向用户显示一些有用的信息。
除少数情况外，所有 snackbar 都运转良好。

当用户尝试访问应用程序但 token 已过期时，我的身份验证保护将用户重定向到登录页面并显示 snackbar ，
这个 snackbar 看起来很好用，但是在控制台上我可以看到这个错误:



在登录页面的ngOnInit中，显示 snackbar :

ngOnInit() {


    if (this.route.snapshot.queryParams['returnUrl']) {
      this.openSnackBar(('token expired'));
    }
}

--

openSnackBar(message: string, action?: string) {
    return this.snackBar.open(message, action, {
      duration: 3000,
    });
  }

我该如何解决这个错误

最佳答案

这不是实质性问题:这是生命周期问题。

如果您不知道，Angular将遵循其生命周期，在该生命周期中，他检查更改，分配变量等。

在您的情况下，他告诉您在将变量标记为选中后就更改了变量的值，并且该变量对他来说是困惑的。您可以在错误中看到新值:

visible-bottom

这意味着您在代码中的某处

this.myVar = 'visible-bottom';

要更正此错误，只需将其围绕在超时中即可，如下所示

setTimeout(() => this.myVar = 'visible-bottom');

这将告诉Angular

关于 Material snackbar 的 Angular 误差，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48111305/