SnackBar 没有出现在 Angular 9 中答案

【问题标题】：SnackBar doesnt show up in Angular 9SnackBar 没有出现在 Angular 9 中
【发布时间】：2020-02-28 02:43:02
【问题描述】：

我有一个SnackBar，当您输入不正确的信息时，它应该显示在登录中，但是当发生这种情况时，SnackBar 不会显示它与其他元素的重叠，我该如何解决？

下面我将说明我是如何做到的

sendAdmin()是页面中按钮调用的函数

snackMessage:string = 'Introduce valid data';

  constructor(private _builder:FormBuilder,private router: Router,
    private adminService: AdminService,public _snackBar: MatSnackBar) { }

    openSnackBar(message: string){
      this._snackBar.open(message, 'X', {
        duration: 3000,
      });
    }
  sendAdmin(){
    this.bSignIn = true;
    let formData = new FormData();
    formData.append('email', this.loginForm.get('email').value);
    formData.append('password', this.loginForm.get('password').value);

    this.adminService.validateAdminCredentials(formData)
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;

        if(auxRes.type == 'success'){
          let auxUser = {
            personId: auxRes.id,
            clientId: auxRes.client_id,
            firstName: auxRes.first_name
          }
          this.isSigned = true;
          localStorage.setItem('leadLoggedAdmin', JSON.stringify(auxUser));
          this.goToAdminDashboard(auxRes.first_name);
        }  
      },
      err => {
        this.bSignIn = false;
        this.openSnackBar(this.snackMessage);
        //window.alert('Introduce valid data');
      }
    );
  }

我也在导入import {MatSnackBar} from '@angular/material/snack-bar';

这就是现在的样子，重叠

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您必须在声明组件的模块中导入MatSnackBarModule。如果您这样做了，请确保在您的styles.scss 或angular.json 的styles 部分中导入材质主题样式。

如果元素重叠，请试试这个：

this._snackBar.open(message, 'X', {
   duration: 3000,
   panelClass: 'snack-bar'
});

并在snack-bar 类上设置z-index: 99。你需要在styles.scss中定义这个类

【讨论】：

那么奇怪，它实际上应该可以工作。也许有一个类或一个元素重叠？你可以检查 DOM 的变化吗？
是的就是这样还是不知道怎么把snackBar放在元素前面
是的，这不起作用，看我发布的图片看看是如何显示的，snackBar 是蓝色的
哈哈所以snackbar确实有效，你也可以在重叠元素上设置z-index吗？像 z-index: 10
看我怎么解决的，你给了钥匙，我没有把它放在重叠的元素上我把它放在底栏

【解决方案2】：

这个组件是如何渲染的？是否有可能由于 ng-if 或类似的原因重新渲染该组件？

【讨论】：

【解决方案3】：

尝试在app.module 文件中导入您的模块MatSnackBarModule，并从共享模块中删除它的导入。

编辑：你检查过你的控制台吗？有没有抛出异常？

更新答案

我认为您应该需要使用verticalPosition 将小吃店的定位设置为top

见API

【讨论】：

【解决方案4】：

我解决了它把一个类放到底部栏，像这样：

.behind{
  z-index: 10;
}

【讨论】：