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