Question

在我的角度4项目中，我实施了一些MatSnackbar 向用户展示一些有用的信息。除了一个案例外，所有的小吃都很好用......

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

MatSnackBarContainer_Host.html：1错误错误： ExpressionChangedAfterItHasBeenCheckedError：表达式已更改检查后。上一个值：'undefined'。当前值： “可见底”。看起来这个视图是在它之后创建的父母及其子女已经过脏检查。是否已创建在一个变化检测挂钩？ at viewDebugError（core.es5.js：8434）[angular] at expressionChangedAfterItHasBeenCheckedError（core.es5.js：8412）[angular] at checkBindingNoChanges（core.es5.js：8576）[angular] at checkNoChangesNodeInline（core.es5.js：12455）[angular] at checkNoChangesNode（core.es5.js：12429）[angular] 在debugCheckNoChangesNode（core.es5.js：13209）[有角度] 在debugCheckRenderNodeFn（core.es5.js：13149）[有角度] at Object.eval [as updateRenderer]（MatSnackBarContainer_Host.html：1）[angular] at Object.debugUpdateRenderer [as updateRenderer]（core.es5.js：13131）[angular] 在checkNoChangesView（core.es5.js：12251）[有角度] at callWithDebugContext（core.es5.js：13493）[angular] at Object.debugCheckNoChangesView [as checkNoChangesView]（core.es5.js：13040）[angular] 在ViewRef_.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.ViewRef_.checkNoChanges （core.es5.js：10197）[有角度的] 在vendor.bundle.js：92838：67 [angular] View_MatSnackBarContainer_Host_0 @ MatSnackBarContainer_Host.html：1 MatSnackBarContainer_Host.html：1 ERROR CONTEXT DebugContext _

在登录页面的ngOnInit中，我显示了快餐栏：

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

我知道您已检查过我的变量，但我需要更改其值，请重新启动更改检测

材料小吃吧的角度误差

1 个答案: