MatSnackBar中的样式从组件打开

时间:2018-09-24 14:19:53

标签: angular angular-material angular-material2

我正在寻找一种方法来执行以下操作:为了显示通知,我想实现一个自定义的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() {
  }

一切正常,但现在我遇到了问题。我想将之前定义的配置(例如config Success传递给这个新的SnackBar,但是在官方文档和Google中我什么都没找到。

有什么方法可以不必全局定义吗?有人可以指导我或告诉我去哪里吗?预先感谢!

1 个答案:

答案 0 :(得分:1)

最后,感谢此shivensinha4中的issue,我有了钥匙:

它还可以为openFromComponent函数提供样式,如下所示:

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

这是工作示例:Stackblitz