MatSnackBar位置错误并隐藏

Question

我正在使用MatSnackBar处理错误，我对显示对话框的位置有疑问，并且不会自动隐藏。

service.ts

facebookLogin() {
const provider = new firebase.auth.FacebookAuthProvider();
return this.oAuthLogin(provider);
}

private oAuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
  .then((credential) => {
    this.pushUserData(credential.user)
    this.router.navigate(['/userProfile'])
  })
  .catch(error => {
    this.handleError(error);

  });
}

private handleError(error: Error) {
  console.error(error);
  this.snackBar.open(error.message, this.action, { duration: 1000 });
}

component.ts

facebookLogin() {
  this.auth.facebookLogin()
}

当我从同一个组件测试它时，一切正常：

openSnackBar() {
this.snackBar.open(this.message, this.action, {
  duration: 500,
});
}

Answer 1

我通过以下方式解决了它，添加了ngZone：

import { Injectable, NgZone } from '@angular/core';

constructor( public snackBar: MatSnackBar, private zone: NgZone )

private handleError(error: Error) {
console.error(error);
  this.zone.run(() => {
    this.snackBar.open(error.message, 'CERRAR', {
      duration: 5000,
    });
  });
}

Answer 2

您可以使用

private handleError(error: Error) {
    console.error(error);
    this.snackBar.open(error.message, this.action,
    { duration: 1000
      verticalPosition: 'top',
      horizontalPosition: 'center'
    });
}

您可以在文档here

中查看可用的配置选项。

Answer 3

试试这个。

this.snackBar.open(message, 'Close', { duration: 3500, verticalPosition: 'top', panelClass: 'snack-error'});