Question

我想为Mat Snackbar创建一个服务，以便在整个应用程序中都可以使用Snackbar。多亏了这个问题-How to use SnackBar on service to use in every component in Angular 2，我才能开始运行，而且我也知道可以通过在SnackBarConfig中添加带有panelClasses的类来更改颜色。我的问题是，我该怎么做并将其提供服务？我不想拥有一个组件，并且我不知道如何让服务知道我要使用的CSS类。我知道我无法将scss导入ts文件。我正在考虑在app.component.scss中创建一个类，然后将其导入到每个我想在其中使用SnackBar的component.scss中，但这是行不通的。我现在真的很困，感谢您的帮助。谢谢。

Answer 1

是的，使用服务来处理小吃栏，然后您可以执行以下方法：

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',
      },
   },
 }),

这是一种方法，但是当然有很多方法可以做到，并且可能比这更好：）

如何创建背景颜色可变的Mat Snackbar服务

1 个答案: