Angular Material Snackbar 未正确显示

Posted 2023-02-23

【中文标题】Angular Material Snackbar 未正确显示

【英文标题】：Angular Material Snackbar not shown correctly

【发布时间】：2019-04-16 02:10:32

【问题描述】：

Stackblitz example

嗨社区 我为我的 Angular 7 项目实现了一个全局错误处理程序和一个全局加载组件（角材料微调器）。 当检测到 HttpErrorResponse 时，应该移除加载器并显示一个有角度的材质小吃栏。

小吃栏应在页面底部打开，并在单击“x”时关闭。

但它在左上角打开。

单击“x”时，它会在预期位置关闭并再次打开。但随后它不再对点击做出反应。单击“x”然后单击窗口的其他位置后它会消失。

移除加载微调器时也会显示此行为。

有人知道如何解决这个问题吗？ 非常感谢。

【参考方案1】：

问题是小吃店在 angular 区域之外运行。

可以在您的SnackbarService 或正在调用error 方法的位置放置快速修复。

Stackblitz:src/app/services/snackbar.service.ts

import  Injectable, NgZone  from '@angular/core';
import  MatSnackBar, MatSnackBarRef, SimpleSnackBar, MatSnackBarConfig  from '@angular/material';

@Injectable(
  providedIn: 'root'
)
export class SnackbarService 

  constructor(
    public snackbar: MatSnackBar,
    private zone: NgZone,
  )  

  error(message: string) 
    const config = new MatSnackBarConfig();
    config.panelClass = ['background-red'];
    config.verticalPosition = 'bottom';
    config.horizontalPosition = 'center';
    this.zone.run(() => 
      this.snackbar.open(message, 'x', config);
    );
  

【讨论】：

哇啊啊啊啊就是这样！谢谢你，谢谢你，谢谢你！你绝对让我开心，哇哦！

谢谢你 - 帮了我

【参考方案2】：

我不确定这些是否能解决您的问题，但我遇到了同样的问题......现在我不再这样做了。 （笑）

尝试将任何私有构造函数实例更改为公共。还将具有“horizo​​ntalPosition”属性的选项参数传递给“center”，将“verticalPosition”属性传递给“bottom”。

我在移动设备上，但如果你想搞一个堆栈闪电战，我可以仔细看看。谢谢。

【讨论】：

嗨，凯文，感谢您的建议。不幸的是，执行您建议的更改并不能解决问题，请参阅我的第一篇文章中链接的 stackblitz 示例。