时间戳

首页 > 解决方案 > 在角形中为小吃店应用不同背景颜色时面临的问题

angular - 在角形中为小吃店应用不同背景颜色时面临的问题

问题描述

我在我的应用程序中有一个场景，我将snackbar方法保留在公共服务中，以便我可以在需要在组件中显示的任何地方调用snackbar。我只需要向某些snackbar显示绿色，其余snackbar背景颜色为黑色.im 能够使用 panelClass 应用绿色背景颜色，但我面临的问题是有时我也会将绿色显示零食栏也用于其他小吃店。任何人都可以建议如何解决这个问题。

 /** 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

标签： angular

解决方案

您可以在打开小吃店时使用额外的参数。您可以true在需要绿色背景时将其保留为false.

并在将 panelClass 添加到小吃店时使用该参数。

 /** 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);
    })
  }

推荐阅读