ExpressionChangedAfterItHasBeenCheckedError 在 Angular 6 的 ngInit 中调用 toastr

Question

注册后，用户被重定向到登录页面，在 URL 中使用 ?welcome=1 参数，以便显示欢迎词。

在登录组件中，我有：

ngOnInit() {
    ... 
    if (this.route.snapshot.queryParams['welcome']) {
      this.toastr.success('Register Successful, please login');
    }
  }

我收到他的消息：

Toast_Host.ngfactory.js? [sm]:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'className: undefined'. Current value: 'className: toast-success toast'. 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.js:8445)
    at expressionChangedAfterItHasBeenCheckedError (core.js:8433)
    at checkBindingNoChanges (core.js:8535)
    at checkNoChangesNodeInline (core.js:11401)
    at checkNoChangesNode (core.js:11390)
    at debugCheckNoChangesNode (core.js:11997)
    at debugCheckRenderNodeFn (core.js:11951)
    at Object.eval [as updateRenderer] (Toast_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
    at checkNoChangesView (core.js:11291)

我不明白，我没有做错任何事，也没有更改任何值，所以为什么会出现错误？

Answer 1

尝试添加超时：

if (this.route.snapshot.queryParams['welcome']) {
  setTimeout(() => {
    this.toastr.success('Register Successful, please login');
  });
}

Answer 2

将你的烤面包机调用放入 setTimeout() in ngAfterViewInit():

ngAfterViewInit() {
  if (this.route.snapshot.queryParams['welcome']) {
    setTimeout(() => {
      this.toastr.success('Register Successful, please login');
    }, 0);
  }
}

ExpressionChangedAfterItHasBeenCheckedError 在 Angular 6 的 ngInit 中调用 toastr

ExpressionChangedAfterItHasBeenCheckedError invoking toastr in ngInit in Angular 6

angular

angular6