Угловой материал Snackbar не показан правильно

Question

Пример Stackblitz

Привет, сообщество Я реализовал глобальный обработчик ошибок и глобальную загрузочную составляющую (угловая прядильщица материала) для моего проекта angular 7. При обнаружении HttpErrorResponse загрузчик должен быть удален, и должна быть показана угловая закусочная материала.

Снэк-бар должен открываться внизу страницы и закрываться при нажатии «x».

Но вместо этого он открывается в верхнем левом углу.

При нажатии «x» он закрывается и снова открывается в ожидаемой позиции. Но тогда он больше не реагирует на клики. Он исчезает после нажатия кнопки «x» и затем щелчка по другой позиции окна.

Это поведение также отображается при снятии загрузочного счетчика.

У кого-нибудь есть идеи, как решить эту проблему? Большое спасибо.

Answer 1

Проблема в том, что снэк-бар запускается за пределами угловой зоны.

Быстрое исправление может быть установлено в вашем 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

Я не уверен, что что-нибудь из этого решит вашу проблему, но у меня были те же проблемы ... теперь я больше этого не делаю. (Смеется)

Попробуйте изменить любые частные экземпляры конструктора на публичные. Также передайте в параметре параметры со свойствами 'HorizontalPosition' в 'center' и 'verticalPosition' в 'bottom'.

Я нахожусь на мобильном телефоне, но если вы хотите сбросить стеки, я могу поближе взглянуть. Благодарю.