在应用不同背景颜色的角度小吃酒吧面临的问题



我的应用程序中有一个场景,其中iam将snackbar方法保留在公共服务中,以便我可以在组件中需要显示的任何地方调用snackbar。我只需要向一些snackbar显示绿色,其余的snackbar背景色是黑色的。我可以使用panelClass应用绿色背景色,但我面临的问题是有时我也会将绿色的showsnackbar添加到其他snackbar中。有人能建议如何解决这个问题吗。

/** SHOWS the snack bar */
showSnackbar(msg) {
this.snackbar.open(msg, '', {
duration: 2500,
verticalPosition: 'bottom',
horizontalPosition: 'right',
panelClass: ['refresh-snackbar']
});
};

这是我将其保留在公共服务中的方法。

/** REFRESH client **/
refreshClient(changePage?:boolean) {
this.spinnerService.show();
this.clientService.refreshClient().subscribe(res => {
// this.defaultPaginateClient();
this.paginateClient(changePage);
this.helper.showSnackbar('Table Refreshed Successfully');
this.spinnerService.hide();
}, err => {
console.log(err);
})
}

在这个方法中,我调用了snackbar,但我在不同组件的其他一些方法中使用了snackbar,我需要为刷新方法应用绿色背景色,我只在几个组件中使用了这种颜色。

::ng-deep .refresh-snackbar{
background-color: green !important;
}
```
this is the code im using it in css

您可以在打开小吃条时使用一个额外的参数。当您需要绿色背景时,您可以将其保留为true,否则将其保持为false

并在将panelClass添加到snackbar时使用该参数。

/** SHOWS the snack bar */
showSnackbar(msg, isGreen:boolean = false) {
this.snackbar.open(msg, '', {
duration: 2500,
verticalPosition: 'bottom',
horizontalPosition: 'right',
panelClass: isGreen ? 'refresh-snackbar': '',
});
};

/** REFRESH client **/
refreshClient(changePage?:boolean) {
this.spinnerService.show();
this.clientService.refreshClient().subscribe(res => {
// this.defaultPaginateClient();
this.paginateClient(changePage);
this.helper.showSnackbar('Table Refreshed Successfully', true);
this.spinnerService.hide();
}, err => {
console.log(err);
})
}

最新更新