Неправильное положение Snackbar при использовании обработчика ошибок в угловых 5 и материале

Question

У меня есть пользовательский глобальный обработчик ошибок

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {
    }

    handleError(err: any): void {
        var route = this.injector.get(Router);
        var snackBar = this.injector.get(MatSnackBar);
        console.log(err);

        if (err instanceof HttpErrorResponse) {
            var message = ErrorMessages.get(err.status);

            if (route.url.toLowerCase() !== '/login' && err.status === 401) {
                route.navigateByUrl('/login');
            }

            if (message.length > 0) {
                snackBar.open(message, "x", { duration: 5000, horizontalPosition: "center", verticalPosition: "bottom" });
            }
        }
    }
}

Положение снэк-бара: , а не в вертикально внизу и горизонтально по центру.

Если я использую снэк-бар в перехватчике http, он отображается правильно

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
    constructor(private loginService: LoginService, private route: Router, private snackBar: MatSnackBar) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        var url = this.route.url;
        var isAuthenticated = this.loginService.isAuthenticated();

        var authHeader = ``;
        if (isAuthenticated) {
            authHeader = `Bearer ${this.loginService.getToken()}`;
        }

        req = req.clone({
            setHeaders: {
                Authorization: authHeader,
                ApiKey: "aaa"
            }
        });

        return next.handle(req)
            .do((ev: HttpEvent<any>) => {
                if (ev instanceof HttpResponse) {

                }
            }, (err: any) => {
                if (err instanceof HttpErrorResponse) {
                    var message = ErrorMessages.get(err.status);

                    if (this.route.url.toLowerCase() !== '/login' && err.status === 401) {
                        this.route.navigateByUrl('/login');
                    }

                    if (message.length > 0) {
                        this.snackBar.open(message, "x", { duration: 5000, horizontalPosition: "center", verticalPosition: "bottom" });
                    }
                }
            });
    }
}

Почему?

Answer 1

У меня тоже была эта проблема, но не с использованием HTTPInterceptor (или любых других перехватчиков).

Я, однако, открывал SnackBar из компонента (openFromComponent), и именно тогда возникла проблема (ранее я просто использовал open).

Запуск из зоны исправил мою проблему.

Вам потребуется обновить конструктор компонента, включив в него NgZone и MatSnackBar сервисы:

constructor(
    private readonly msb: MatSnackBar,
    private readonly zone: NgZone
  ) { }

... а затем запустить:

private openErrorSnackBar(data: string[]) {
    this.zone.run(() => {
      this.msb.openFromComponent(ErrorSnackComponent, {
        data,
        horizontalPosition: 'end',
        duration: 5000
      });
    });
  }

Я завернул свой код в удобную функцию, которая принимает массив строк (сообщений об ошибках) для отображения в компоненте Snackbar,