Как создать сервис Mat Snackbar с изменяемым цветом фона - PullRequest
Новая
       12

Как создать сервис Mat Snackbar с изменяемым цветом фона

0 голосов
/ 04 октября 2019

Я хочу создать сервис для Mat Snackbar, чтобы Snackbar был доступен во всем приложении. Я могу запустить его благодаря этому вопросу - Как использовать SnackBar на сервисе для использования в каждом компоненте Angular 2 , и я также знаю, что могу изменить цвет, добавив класс с panelClasses в SnackBarConfig. У меня вопрос, как я мог сделать это и иметь это в службе? Я не хочу иметь компонент, и я не знаю, как сервис знает класс css, который я хочу использовать. Я знаю, что не могу импортировать scss в файл ts. Я думал о создании класса в app.component.scss и его импорте в каждый компонент. Scss, в котором я хочу использовать SnackBar, но это не работает. Я действительно застрял сейчас, и я ценю любую помощь. Спасибо.

1 Ответ

0 голосов
/ 04 октября 2019

Да, используйте сервис для обработки вашей закусочной, тогда вы можете сделать метод, подобный следующему: 

export class SnackbarService {
    constructor(private _snackBar: MatSnackBar) {}

    public openSnackBarFromComponent(snackbarProps: ISnackbarComponent): void {
       this._snackBar.openFromComponent(SnackbarComponent, {
          panelClass: snackbarProps.config.panelClass || [''],
          duration: snackbarProps.config.duration || 2000,
          horizontalPosition: snackbarProps.config.horizontalPosition || 'center',
          verticalPosition: snackbarProps.config.verticalPosition || 'bottom',
          data: snackbarProps.config.data || {},
       });
     }
}

Итак, я создал сервис с методом, который можно вызывать из любого места, откройте компонент с именемSnackbarComponent с определенной конфигурацией. В вашем PanelClass вы можете добавить определенный класс с определенным фоном.

Я вызываю метод из SnackbarService так с моей настраиваемой конфигурацией закусочной: 

this.SnackbarService.openSnackBarFromComponent({
   config: {
      panelClass: ['Your customClass'],
      data: {
         message: 'your msg',
         iconClass: 'check-circle',
         colorIcon: 'fg_green',
      },
   },
 }),

Это способ, но, конечно, есть много способов сделать это, и, возможно, лучше, чем этот:)

...