angular - 如何在 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

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

:

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

Demo