Angular Material Snackbar 未正确显示

Question

Stackblitz 示例

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

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

但是它在左上角打开。

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

移除加载旋转器时也会出现此行为。

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

Answer 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);
    });
  }

}

Answer 2

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

Answer 3

如果在您的开发工具中收到此警告：“找不到 Angular Material 核心主题..”，那么解决方案就是导入材质主题 css，在我的例子中，我将此行添加到我的 style.scss 中：

@import 'assets/css/material/indigo-pink.css';

Answer 4

因为垫子小吃店容器在屏幕外。

这会有帮助

::ng-deep .mat-snack-bar-container {
  position: fixed;
  z-index: 9999;
  top: 40px; /* Adjust this value to set the vertical position */
  left: 50%; /* Adjust this value to set the horizontal position */
  transform: translateX(-50%);
}

Answer 5

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

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

我在移动设备上，但如果你想进行 stackblitz，我可以仔细看看。谢谢。