Angular Material Snackbar 未正确显示

Question

Stackblitz example

社区您好 我为我的 Angular 7 项目实现了一个全局错误处理程序和一个全局加载组件( Angular Material 旋转器)。 当检测到 HttpErrorResponse 时，应删除加载程序并显示 Angular Material snackbar 。

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

但它在左上角打开。

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

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

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

Answer 1

问题是 snackbar 正在 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);
    });
  }

}