MatSnackBar 中的样式从组件打开

Question

我正在寻找一种方法来执行以下操作：为了显示通知，我想实现自定义 SnackBar。我按照官方文档 (here) 创建了一个简单的 Snackbar，带有一些自定义配置。

this.snackBar.open('Message one', 'OK', configSuccess);

export const configSuccess: MatSnackBarConfig = {
  panelClass: 'style-success',
  duration: 10000,
  horizontalPosition: 'left',
  verticalPosition: 'bottom'
};

这很好用，但我想在我的 SnackBar 中显示不同的内容（特别是发送数据和显示两个按钮）。按照文档，我创建了一个组件并从中打开我的 SnackBar :

/*...*/    
this.snackBar.openFromComponent(SnackbarMessageComponent, {
              data: 'Message one',
            });
/*...*/

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

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  ngOnInit() {
  }

一切正常，但现在我遇到了问题。我想将我之前定义的配置传递给这个新的 SnackBar（例如 config Success），但是在官方文档和 Google 中我没有找到任何东西。

有没有不用全局定义的方法？有人可以指导我或告诉我去哪里吗？提前致谢！

Answer 1

终于，感谢shivensinha4 in this issue，我得到了钥匙:

它也可以为openFromComponent函数提供样式，像这样：

this.snackBar.openFromComponent(SnackbarMessageComponent, {
  data: 'Message one',
  ...this.configSuccess
});

这是工作示例：Stackblitz

MatSnackBar 中的样式从组件打开

Styles in MatSnackBar open from component

angular-material

angular-material2

angular