Angular Matsnakbar中的样式从组件打开
我正在寻找一种方法来执行以下操作:为了显示通知,我想实现一个自定义SnackBar。我按照官方文档()创建了一个简单的Snackbar,带有一些自定义配置Angular Matsnakbar中的样式从组件打开,angular,angular-material,angular-material2,Angular,Angular Material,Angular Material2,我正在寻找一种方法来执行以下操作:为了显示通知,我想实现一个自定义SnackBar。我按照官方文档()创建了一个简单的Snackbar,带有一些自定义配置 this.snackBar.open('Message one', 'OK', configSuccess); export const configSuccess: MatSnackBarConfig = { panelClass: 'style-success', duration: 10000, horizontalPos
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
),但在官方文档和谷歌中我没有找到任何东西
有没有什么方法可以做到这一点而不必对其进行全局定义?有人能指引我或告诉我去哪里吗?提前谢谢 最后,多亏了这一点,我有了钥匙:
它还可以为openFromComponent
函数提供样式,如下所示:
this.snackBar.openFromComponent(SnackbarMessageComponent, {
data: 'Message one',
...this.configSuccess
});
下面是一个工作示例:最后,多亏了这一点,我有了钥匙:
它还可以为openFromComponent
函数提供样式,如下所示:
this.snackBar.openFromComponent(SnackbarMessageComponent, {
data: 'Message one',
...this.configSuccess
});
以下是工作示例: