Angular Material Snackbar没有正确显示

Question

Stackblitz example

嗨社区 我在我的angular 7项目中实现了一个全局错误处理程序和一个全局加载组件（角材料微调器）。 当检测到HttpErrorResponse时，应卸下装载程序，并显示有角度的材料小吃吧。

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

但是，它在左上角打开。

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

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

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

Answer 1

问题在于，小吃店被冲出了安格勒地区之外。

可以在您的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);
    });
  }

}

Answer 2

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

尝试将任何私有构造函数实例更改为public。还要将options参数的“ horizo​​ntalPosition”属性设置为“ center”，将“ verticalPosition”属性设置为“ bottom”。

我在移动设备上，但是如果您想扔个堆炸弹，我可以仔细看看。谢谢。