Angular material 没有按钮的基本小吃店

Question

所以Angular Material有两种调用SnackBar的主要方式。一种方法是调用基本的默认 SnackBar：

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

另一种方法是将组件称为 SnackBar：

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

现在我的问题是，如何在没有 'Undo' 按钮的情况下调用基本的（不使用组件）。我可以这样做：

snackBar.open('Message archived');

但是我该如何调整持续时间和所有其他属性呢？

https://material.angular.io/components/snack-bar/overview

Answer 1

试试这个。

snackbar.open('Message archived', '', {
  duration: 3000,
  extraClasses :['test']
});

添加要测试的样式class以便文本对齐。

如果 extraClasses 不起作用，请改用 panelClass

CSS class.

.test .mat-simple-snackbar{justify-content: center;}

Answer 2

2020 年更新

已接受的答案似乎不再正确。如果有人遇到同样的问题，这对我有用：

像往常一样用 panelClass 属性创建小吃店。

// xy.component.ts

this.snackBar.open('Message', '', {
    duration: 3000,
    panelClass: ['simple-snack-bar']
}

由于自定义 CSS 已应用于小吃店容器，您必须 select Angular Material 小吃店 class 来覆盖样式。

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar {
  justify-content: center;
}

Angular material 没有按钮的基本小吃店

Angular material basic snackbar without button

angular-material

snackbar

angular