Question

我正在创建ionic 4 angular app，并使用mat-snackbar来显示成功和错误消息。我需要更改红色错误消息的背景颜色和绿色成功消息。以下我未使用的代码工作。

 //.ts file
 this.snackBar.open('Enter Player Name','Ok', {
    verticalPosition: 'top',
    duration: 2000,
    panelClass: ['blue-snackbar']
  });

  //css
  .blue-snackbar {
   background: blue;
  }

Answer 1

我们可以在global.css中编写CSS类。

//write this css class in global.css
  .blue-snackbar{
   background:blue;
 }

Answer 2

与 angular 项目相同，甚至可以根据需要使小吃店更加个性化

export class HandleNotifyService {
  config: MatSnackBarConfig = {
    panelClass: NotifyType.success,
    duration: 4000,
    verticalPosition: 'bottom',
  };

  constructor(private snackBar: MatSnackBar, private router: Router, private auth: AuthService) {}

  handleNotify(message) {
    this.config.panelClass = NotifyType.success;
    if (message) {
      this.openSnackBar({ message, type: NotifyType.success }, this.config);
    }
  }

  handleWarn(message) {
    this.config.panelClass = NotifyType.warn;
    if (message) {
      this.openSnackBar({ message, type: NotifyType.warn }, this.config);
    }
  }

  handleErrors(response) {
    this.config.panelClass = NotifyType.error;
    const { status } = response;
    if (status && status === 401) {
      this.auth.removeAccount();
      this.router.navigate(['login']);
    } else if (status && status === 403) {
      this.openSnackBar({ message: 'No permission', type: NotifyType.error }, this.config);
    } else {
      let message: string;
      if (isString(response)) {
        message = response;
      } else if (isObject(response)) {
        try {
          const parsed = JSON.parse(response.error || response);
          if (isString(parsed.message)) {
            message = parsed.message;
          } else if (isObject(parsed.message)) {
            message = parsed.errors[Object.keys(parsed.errors)[0]];
          } else {
            message = parsed;
          }
        } catch (err) {
          message = `${response.error || 'An error occurred.'}`;
        }
      } else {
        message = response.toString() || 'An error occurred.';
      }

      this.openSnackBar({ message, type: NotifyType.error }, this.config);
      return throwError(response);
    }
  }

  openSnackBar(data, config) {
    this.snackBar.openFromComponent(CustomSnackBarComponent, { data, ...config });
  }
}

如何在ionic4 angular app中更改mat-snackbar背景颜色？

2 个答案: