Angular 2/4 如何设计 Angular Material 设计 snackbar 的样式

Question

我是 Angular2/4 和 angular typescript 的新手。我想设计 Angular Material 设计 snackbar 的样式，例如将背景颜色从黑色和字体颜色更改为其他颜色。
我该如何设计“snackbar”的样式？

我在服务/核心中有 Material design snackbar，为了使它可用，我根据需要在每个组件中调用它。

如何在 Angular 2/4 中设置 Angular 2 Material 设计“snackbar”的样式？我在下面包含了代码片段:

服务/核心

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { DOCUMENT } from'@angular/platform-browser'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { MdDialogConfig, ComponentType } from '@angular/material'; 
import {MdSnackBar} from '@angular/material';

constructor(
    public dialog: MdDialog,
    public snackBar: MdSnackBar,
    @Inject(DOCUMENT) public doc: any   ) {
      dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
        if (!doc.body.classList.contains('no-scroll')) {
        doc.body.classList.add('no-scroll');
        }
      });
      dialog.afterAllClosed.subscribe(() => {
        doc.body.classList.remove('no-scroll');
      });        }

   openSnackBar(message: string, action?: string) {
    this.snackBar.open(message, action, {
      duration: 4000,
    });   }

wiz.components.ts....

 saveData(): void {
    this.advisorClientModel.currentStep = this.currentStep;
    this.advisorClientModel.clientId = this.faService.getClientId();
    this.advisorClientModel.isMaxAmount = this.isMaximumAmount;
    this.advisorClientModel.desiredLoanAmount = this.loanAmount;
    this.advisorClientModel.maxLoanAmount = this.eligibleSelected.advanceAmount;
    this.advisorClientModel.pledgedAccounts = this.getPledgedAccountsArray();
    this.advisorClientModel.pledgedMarketValue = this.getPledgedMarkeValue();

    this.faService.updateAdvisorClient( this.advisorClientModel )
      .subscribe(
        successModel => {
          this.coreService.openSnackBar("Your Data Has been Saved");
          this.navigateTo("fa/wiz" + (this.currentStep + 1));
        },
        error => {
          this.onError(error);
        }
      );
  }

Answer 1

md-snackbar 提供了一个服务来提供自定义config。 config 的一个属性是 extraClasses，它允许将 CSS 类添加到 snackbar 容器 (doc)。

extraClasses 可以与 ::ng-deep 一起使用来覆盖默认的 CSS 类。这是一个例子:

组件.ts:

需要在组件中进行以下导入:

import {MdSnackBar, MdSnackBarConfig} from '@angular/material';

(提供自定义配置)

openSnackBar(message: string, action?: string) {
  let config = new MdSnackBarConfig();
  config.extraClasses = ['custom-class'];
  this.snackBar.open(message, action ? 'Action Label' : undefined, config);
}

组件.css:

::ng-deep snack-bar-container.custom-class {
  background: yellow;
}

::ng-deep .custom-class .mat-simple-snackbar {
  color: green;
}

这是一个 Plunker demo如果你想试试。

2018 年 11 月更新:Angular 6+

语法有一点变化，md- 前缀被替换为 mat- 并且 extraClasses 被替换为 panelClass。虽然功能总体上是相同的:

const config = new MatSnackBarConfig();
config.panelClass = ['custom-class'];
...

还有进口:

import { MatSnackBar, MatSnackBarConfig } from '@angular/material';