角材料小吃店位置

Question

我想在标题的下面放置小吃栏（高度为60像素）。

问题是verticalPosition将小吃栏放置在顶部并覆盖标题。 我曾尝试添加“ margin-top：75像素”，但以上区域不可点击。 （有一个覆盖物）

因为我还有其他对话框，所以我无法更改cdk-overlay-pan的样式。

Answer 1

您可以尝试以下方法：

1. 创建全局css类以修改Snackbar组件的样式。
2. 在配置选项中设置panelClass属性。

在全局styles.scss中添加此样式声明：

.my-custom-snackbar {
  margin: 0 !important;
  position: absolute;
  right: 25px;
  top: 60px;
}

然后在打开SnackBar时：

this.snackbar.open('Hello the world!', '', {
  panelClass: 'my-custom-snackbar'
});

Answer 2

从api文档（https://material.angular.io/components/snack-bar/api）：

MatSnackBar的“打开”方法的参数：

message (string) - The message to show in the snackbar.
action (string) - The label for the snackbar action.
config? (MatSnackBarConfig<any>) - Additional configuration options for the snackbar.

MatSnackBarConfig具有以下属性：

horizontalPosition: MatSnackBarHorizontalPosition - The horizontal position to place the snack bar.
verticalPosition: MatSnackBarVerticalPosition - The vertical position to place the snack bar.

要查看实际情况，您可以轻松创建一个组件，注入MatSnackBar和 编写一个开放方法来传递您的配置。

这是我的Snackbar组件外观的一个小例子：

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-mat-snackbar',
  templateUrl: './mat-snackbar.component.html',
  styleUrls: ['./mat-snackbar.component.scss']
})
export class MatSnackbarComponent {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message: string, action: string, className: string) {
    this.snackBar.open(message, action, {
      duration: 9000,
      verticalPosition: 'top',
      horizontalPosition: 'center',
      panelClass: [className],
    });
  }

}

我从我的HTTP拦截器中这样称呼它：

constructor(private SnackbarComponent: MatSnackbarComponent) {}
...
...
// Something wrong happened
this.SnackbarComponent.openSnackBar(errorMessage, 'Close', 'error-snackbar');

在我的Style.css文件中，我为该快餐栏添加了一个CSS类，这也是openSnackBar方法的最后一个参数。 这只是一种解决方法，因为我的mat-snackbar.component.css中的某些CSS无法正常工作。我在MatSnackBar panelClass doesnt read styling class处找到了::ng-deep的其他解决方案。 您必须谨慎使用它，因为如果在styles.css中使用样式，则没有ViewEncapsulation。但是对我来说，这样做比较干净。

我的styles.css如下：

.error-snackbar {
  position: absolute;
  top: 60px;
}