材料小吃店的角度错误

Question

在我的 Angular 4 项目中，我实现了一些 MatSnackbar 向用户展示一些有用的信息。 除一种情况外，所有小吃店都很好用……

当用户尝试访问应用程序但令牌已过期时，我的身份验证保护会将用户重定向到登录页面并显示一个快餐栏， 这个小吃吧似乎运作良好，但在控制台我可以看到这个错误：

MatSnackBarContainer_Host.html:1 ERROR 错误： ExpressionChangedAfterItHasBeenCheckedError：表达式已更改 检查后。以前的值：'未定义'。当前值： '可见底部'。看起来视图是在它之后创建的 parent 及其子节点已被脏检查。是否已创建 在更改检测挂钩中？ 在 viewDebugError (core.es5.js:8434) [角度] 在 expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [角度] 在 checkBindingNoChanges (core.es5.js:8576) [角度] 在 checkNoChangesNodeInline (core.es5.js:12455) [角度] 在 checkNoChangesNode (core.es5.js:12429) [角度] 在 debugCheckNoChangesNode (core.es5.js:13209) [角度] 在 debugCheckRenderNodeFn (core.es5.js:13149) [角度] 在 Object.eval [作为 updateRenderer] (MatSnackBarContainer_Host.html:1) [角度] 在 Object.debugUpdateRenderer [作为 updateRenderer] (core.es5.js:13131) [角度] 在 checkNoChangesView (core.es5.js:12251) [角度] 在 callWithDebugContext (core.es5.js:13493) [角度] 在 Object.debugCheckNoChangesView [as checkNoChangesView] (core.es5.js:13040) [角度] 在 ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.checkNoChanges (core.es5.js:10197) [角度] 在 vendor.bundle.js:92838:67 [角度] View_MatSnackBarContainer_Host_0 @ MatSnackBarContainer_Host.html:1 MatSnackBarContainer_Host.html:1 错误上下文 DebugContext_

在登录页面的 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,
    });
  }

我该如何解决这个错误

Answer 1

这不是材料问题：这是生命周期问题。

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

在您的情况下，他告诉您，您在他将变量标记为已检查后更改了该变量的值，这对他来说是错误的。您可以在错误中看到新值：

visible-bottom

这意味着在你的代码的某个地方，你正在做一个

this.myVar = 'visible-bottom';

要纠正这个错误，只需像这样在超时中包围它

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

这会告诉 Angular

我知道你已经检查了我的变量，但我需要更改它的值，所以请重新启动你的更改检测