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

Posted

技术标签:

【中文标题】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

【讨论】:

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

以上是关于Angular 5 材质小吃栏仅针对自定义 ErrorHandling 无法正确显示,否则它可以正常工作的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 5 的 Angular 材质 Snackbar 中添加图标

使用 Angular 材质定义自定义主题时出现 SassError

Angular 材质自定义组件主题

Angular - 材质:进度条自定义颜色?

如何使用 angular5 和 angular 材质创建自定义颜色主题

Angular 材质自定义选项卡