Возникает проблема при применении другого цвета фона для закусочной в angular

Question

У меня есть сценарий в моем приложении, где я держу метод закусочной в общем сервисе, чтобы я мог вызывать закусочную везде, где мне нужно показать в компонентах. Мне нужно показать зеленый цвет только для некоторой закусочной, оставшийся фон закусочной Цвета - черный. Я могу применить зеленый фоновый цвет, используя 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);
    })
  }

В этом методе я вызываю закусочную, но я использую Снэк-бар в некоторых других методах различных компонентов, мне нужно применить зеленый фоновый цвет только для метода refre sh, который я использовал в нескольких компонентах.

::ng-deep .refresh-snackbar{
  background-color: green !important;
}
```

this is the code im using it in css

Answer 1

Вы можете использовать дополнительный параметр при открытии закусочной. Вы можете оставить его как 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);
    })
  }