快速更改路线会触发 ExpressionChangedAfterItHasBeenCheckedError (matsnackbar)

Question

我有一个包含两条路线的导航栏。每条路线都将我带到一个组件，该组件 onInit 发出 http 请求以获取要在 table 中显示的信息。如果 http 是 200 但没有信息，我调用具有 matsnackbar 的 service，并创建 matsnackbar.open(blabla) 以显示 "hey, there's no info here"

问题是，当我在这两条路线之间快速切换时，出现了这个错误

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '@state: undefined'. Current value: '@state: void'. 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 ?

我试图将 snackbar 调用放在其他一些生命周期挂钩中，但我遇到了同样的错误或无限循环。

谢谢。

Answer 1

这通常是因为状态从 ngOnInit 之前和 ngOnInit 期间检查时发生了变化。我发现消除此警告的最简单方法是在一个小的超时时间内抛出语句，让 ngOnInit 在打开对话框或放置快餐栏消息之前完成。用户不会注意到它，它会让 Angular 正常工作。

ngOnInit() {
  // do stuff
  setTimeout(() => matsnackbar.open(blabla), 50);
  // do other stuff
}

快速更改路线会触发 ExpressionChangedAfterItHasBeenCheckedError (matsnackbar)

changing routes quickly triggers ExpressionChangedAfterItHasBeenCheckedError (matsnackbar)

angular-material

angular

angular6