Angular Material Snackbar 未正确显示答案

【问题标题】：Angular Material Snackbar not shown correctlyAngular Material Snackbar 未正确显示
【发布时间】：2019-04-16 02:10:32
【问题描述】：

Stackblitz example

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

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

但它在左上角打开。

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

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

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

【问题讨论】：

标签： angular angular-material angular7 snackbar

【解决方案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】：

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

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

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

【讨论】：

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