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

您可以确定docs指定的verticalPosition: MatSnackBarVerticalPosition

ts：

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

Demo

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

并更改颜色，在您的样式中。css定义红色小吃栏：

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

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

Answer 3

这应该有效：

.mat-snack-bar-container {
 margin-top: 50px !important;
}

Answer 4

对于想知道如何动态设置快餐栏位置的任何人，下面是一个示例：

showSnackBar(text: string, duration = 2000, actionText = 'Fechar', horizontalPosition = 'center'): MatSnackBarRef<SimpleSnackBar> {
    return this.snackBar.open(text, actionText, {
      duration: duration,
      // Cast the variable to MatSnackBarHorizontalPosition
      horizontalPosition: horizontalPosition as MatSnackBarHorizontalPosition
    });
  }

并从以下位置导入MatSnackBarHorizontalPosition：

import { MatSnackBarHorizontalPosition } from "@angular/material/snack-bar";

Answer 5

这已被弃用，但在 Angular 中运行良好：12.0.0-rc.3。

::ng-deep .mat-snack-bar-container {
    margin-top: 250px !important;
}

如何在Angular中定位MatSnackBar模块？

5 个答案: