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示例显示了我的问题.

Please try the issue here: stackblitz example showing my issue.

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中调用材料小吃栏时，我们必须使用称为NgZone的东西(我认为是由于ErrorHandler在Angular中以某种特殊方式被调用)

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)

因此，调用小吃店的代码应为:

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屋！