在我的 Angular 4 项目中,我实现了一些 MatSnackbar 向用户显示一些有用的消息。 除了一种情况外,所有 snackbar 都很好用......
当用户尝试访问应用程序但 token 已过期时,我的身份验证守卫会将用户重定向到登录页面并显示一个 snackbar , 这个 snackbar 似乎运作良好,但在控制台我可以看到这个错误:
MatSnackBarContainer_Host.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'visible-bottom'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ? 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] 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 ERROR CONTEXT 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,
});
}
如何解决这个错误
最佳答案
这不是 Material 问题:这是生命周期问题。
如果您不知道,Angular 遵循一个生命周期,在这个生命周期中他会检查更改、分配变量等等。
在您的情况下,他告诉您您在他将变量标记为选中后立即更改了变量的值,这是他的错觉。您可以在错误中看到新值:
visible-bottom
这意味着在你的代码中的某处,你正在做一个
this.myVar = 'visible-bottom';
要更正此错误,只需像这样将其包围在超时中
setTimeout(() => this.myVar = 'visible-bottom');
这将告诉 Angular
I know you have checked my variable, but I need to change its value, so restart your change detection please
关于 Material snackbar 中的 Angular 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48111305/