Angular Material Snackbar没有正确显示

Question

Stackblitz示例

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

快餐栏应在页面底部打开，单击“ x”时应关闭。

但相反，它在左上方打开。

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

卸下加载微调器时，也会显示此行为。

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

Answer 1

问题在于，小吃吧正在超出Angle的区域。

快速修复可以放在您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);
    });
  }

}