材料小吃吧的角度误差

Question

在我的角度4项目,我已经实现了一些MatSnackbar 显示一些有用messate给用户.除了一个案例外,所有小吃都很好用......

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

MatSnackBarContainer_Host.html:1错误错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'undefined'.当前值:'visible-bottom'.看起来这个视图是在其父级及其子级被脏检查后创建的.它是在变更检测钩子中创建的吗？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]在checkNoChangesNode(core.es5.js:12429)[angular] at debugCheckNoChangesNode(core.es5.js:13209)[angular] at debugCheckRenderNodeFn(core.es5.js:13149)[angular] at Object .eval [as updateRenderer](MatSnackBarContainer_Host.html:1)[angular] at Object.debugUpdateRenderer [as updateRenderer](core.es5.js:13131)[angular] at checkNoChangesView(core.es5.js:12251)[angular] at callWithDebugContext(core.es5.js:13493)[angular] at Object.debugCheckNoChangesView [as checkNoChangesView](core.es5.js:13040)[angular] at ViewRef_.webpackJsonp .../../../core/@ angular/core.es5.js.ViewRef_.checkNoChanges(core.es5.js:10197)[angular] at vendor.bundle.js:92838:67 [angular] View_MatSnackBarContainer_Host_0 @ MatSnackBarContainer_Host.html:1 MatSnackBarContainer_Host .html:1错误上下文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

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