Angular Material Snackbar 显示不正确

Question

嗨社区我为我的 angular 7 项目实现了一个全局错误处理程序和一个全局加载组件（angular material 微调器）。当检测到 HttpErrorResponse 时，加载器应该被移除，并且应该显示一个 angular material snackbar。

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

而是在左上角打开。

单击 "x" 时，它会关闭并在预期位置再次打开。但随后它不再对点击做出反应。单击 "x" 然后单击 window 的不同位置后它会消失。

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

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

Answer 1

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

尝试将任何私有构造函数实例更改为 public。同时将属性 'horizontalPosition' 传递给 'center' 和 'verticalPosition' 传递给 'bottom'.

的选项参数

我在移动设备上，但如果您想发起一场 stackblitz，我可以仔细看看。谢谢。

Answer 2

问题是快餐店运行在 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);
    });
  }

}

Answer 3

我遇到了几乎相同的错误，但我的 snacbar 显示在我的父组件之外。在 devtools 中我警告说我 - 我的 material 版本与 angular cdk 版本不一致 - 比我更新我的 material 到最新并且它工作正常

Angular Material Snackbar 显示不正确

Angular Material Snackbar not shown correctly

angular-material

snackbar

angular

angular7