Angular 5 材料小吃店仅针对自定义 ErrorHandling 无法正确显示，否则它可以正常工作 [英] Angular 5 material snackbar is not showing correctly for custom ErrorHandling only, otherwise it works fine

问题描述

Angular 5 材质，材质小吃栏仅针对自定义 ErrorHandling 无法正确显示，否则它可以正常工作:

Angular 5 material, material snackbar is not showing correctly for custom ErrorHandling only, otherwise it works fine:

我正在尝试使用材料快餐栏显示我的后端错误，问题是它第一次被触发时，它出现在错误的位置(不是应有的底部中间，而是在左侧)&它永远留在那里而不会消失(根据我的配置，它应该在 2 秒后自动消失)

I am trying to show my backend errors using material snackbar, the problem is that the 1st time it is fired, it appears in wrong place (not the bottom middle as it should, but up to the left) & it stays there forever without disappearing (it should automatically disappear after 2 seconds as per my configuration)

下次出现时，它将正确出现&2 秒后消失.

For the next times it appears, it will appear correctly & disappear after the 2 seconds.

请在此处尝试该问题:stackblitz 示例显示了我的问题.

stackblitz 代码在这里

谢谢

推荐答案

我花了很长时间才找到答案，我不太确定为什么它会这样工作，但确实有效，所以我希望它可以帮助其他人.

It took me ages to find the answer, I am not very sure why it works like this but it does work, so I hope it helps someone else.

在ErrorHandler 中调用材质snackbar 时，我们必须使用一种叫做NgZone 的东西(我认为是由于在Angular 中以某种特殊方式调用了ErrorHandler)

We have to use something called NgZone when calling the material snackbar in the ErrorHandler (I think due to ErrorHandler being called in some special manner in Angular)

所以调用snackbar的代码应该是:

So the code calling the snackbar should be:

constructor(private matSnackBar: MatSnackBar, private zone: NgZone, private dataService: DataService) { }
notify (message: string) {
    this.zone.run(() => {
      this.matSnackBar.open(message, '' , {
        duration: 2000
      });
    });
  }

更新的 Stackblitz 现在正在运行

这篇关于Angular 5 材料小吃店仅针对自定义 ErrorHandling 无法正确显示，否则它可以正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！