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

Posted 2023-03-13

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

【英文标题】：Angular 5 material snackbar is not showing correctly for custom ErrorHandling only, otherwise it works fine

【发布时间】：2018-10-26 15:04:34

【问题描述】：

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

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

下次出现时，它将正确出现并在 2 秒后消失。

请在此处尝试该问题： stackblitz example showing my issue.

The stackblitz code is here

谢谢

【参考方案1】：

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

在ErrorHandler中调用materialsnackbar时，我们必须使用一个叫做NgZone的东西（我认为是由于在Angular中以某种特殊方式调用了ErrorHandler）

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

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

Updated Stackblitz that is now working

【讨论】：

感谢您的投票，也许您也可以为这个问题投票，因为它对您很有用，干杯