如何在Angular中定位Position MatSnackBar模块？

Question

我试图将MatSnackbar模块定位在页面顶部.

我试过用它config来添加customclass.这是我的代码:

component.ts

let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);

的CSS

.red-snackbar{
    position: absolute !important;
    top: 54px;
}

但它没有用.是否可以重新定位MatSnackbar？

Answer 1

您可以确定文档verticalPosition: MatSnackBarVerticalPosition指定的内容

TS:

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      // here specify the position
      verticalPosition: 'top'
    });
}

演示

Answer 2

定位小吃店使用位置值

            this.snackBar.open(message.text, action, {
                duration: this.timeOut,
                verticalPosition: 'bottom', // 'top' | 'bottom'
                horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
                panelClass: ['red-snackbar'],
            });

并改变颜色，在你的 style.css 中定义 red-snackbar：

 .red-snackbar{
  background-color: rgb(153, 50, 50);
  color:lightgoldenrodyellow;
}

https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence