Angular 2/4 如何设计风格 angular material 设计小吃店

Question

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

我在 service/core 中有 material 设计快餐栏，为了使它可用，我根据需要在每个组件中调用它。

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

service/core

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 类添加到小吃店容器 (doc)。

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

component.ts:

组件中需要以下 import：

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);
}

component.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';

Answer 2

Angular 5 及以上您不需要使用自定义配置服务，只需在方法 openFromComponent 持续时间后传递 extraClasses 数组即可。

方法如下

app.module.ts:

  import { MatSnackBarModule } from '@angular/material';

添加导入

@NgModule({ declarations: [ .. ], imports: [ MatSnackBarModule ]....

component.ts:

需要在组件中导入以下内容：

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

调用 SnackBar 的示例方法

openSnackBar(message, type) {
   let extraClasses;
   if (type == 'error') {
     extraClasses = ['background-red'];
   } else {
     extraClasses = ['background-green'];
 }

 this.snackBar.openFromComponent(SnackBarTemplateComponent, {
   duration: 30000,
   extraClasses: extraClasses,
   data: {
     message: message,
     type:type
   }
 });
}

将相应的类添加到全局 style.css style.css:

.background-red{
  background-color: rgb(153, 50, 50);
}
.background-green{
  background-color: rgb(29, 102, 29);
}

Answer 3

从垫子 SnackBarConfig Class 你可以添加

panelClass: string | string[]

"Extra CSS classes to be added to the snack bar container".

this.snackBar.open("Your custom Message", '', {
      panelClass:"custom_sneak_bar"
}

Answer 4

::ng-deep 支持将被取消，很快就会宣布。在您的消息栏组件上设置 封装：ViewEncapsulation.None，您就可以开始了：

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material';
import { MessageBarType } from './message-bar.model';

@Component({
  selector: 'app-message-bar',
  templateUrl: 'message-bar.component.html',
  styleUrls: ['message-bar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MessageBarComponent implements OnInit {

  public MessageBarType: typeof MessageBarType = MessageBarType;

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: { text: String, type: MessageBarType }) { }

  ngOnInit() {
  }
}

然后在你的 scss 文件中：

@import '~@angular/material/theming';
@import '~app/theme-defs';

snack-bar-container {
  &.error {
    background-color: mat-color($warn);
  }

  &.warning {
    background-color: mat-color($dark-warn);
  }

  &.info {
    background-color: mat-color($accent);
  }
}

Answer 5

我编写了以下代码以与 Angular 6 和 Angular Material 6 一起使用。

包含 snackBar 调用的服务：

@Injectable()
export class MessageService {
   constructor(private snackBar: MatSnackBar) {}

   showError(message: string) {
      const config = new MatSnackBarConfig();
      config.panelClass = ['background-red'];
      config.duration = 5000;
      this.snackBar.open(message, null, config);
   }
}

在styles.css文件中添加cssclass：

.background-red{
   background-color: rgb(153, 50, 50);
}

Answer 6

对于 angular 6 到 9 适用于（在 material 的全局 scss 样式中）

说明：使用@mixin 函数自定义您的 snackBar，在本例中称为“@mixin snack-theme($theme)”，然后将此函数中声明的所有 classes 添加到您的模板中像这样

@include snack-theme($my-app-theme);

全局 scss 文件（styles.scss）：

@import '../node_modules/@angular/material/_theming.scss';
@include mat-core();

$background-primary: #232323;
$background-accent: #353535;
$background-warn: #c1640c;
$font-color-default: silver;

$my-app-primary: mat-palette($mat-light-green, 700);
$my-app-accent: mat-palette($mat-cyan, 800 );
$my-app-warn: mat-palette($mat-red, 400);


$my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn);


@mixin snack-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);


    .mat-snack-bar-container {
        background-color: $background-accent !important;
        color: $font-color-default;
    }
    //Added with panelClass property
    .snack-error {
        button {
            color: mat-color($warn)
        }
    }
    //Added with panelClass property
    .snack-success {
        button {
            color: mat-color($primary)
        }
    }
}

@include snack-theme($my-app-theme);

...

并像（在您的组件中）这样调用零食

        this.snackBar.open("your message", 
           "your action",
          {
            duration: 3000,
            panelClass: (isSuccess ? ["snack-success"] : ["snack-error"])
          })

snack-success 和 snack-error class 在@mixed 函数中定义 (@mixin snack-theme)

注意：不要忘记将全局 scss 文件包含在 scss 组件中。例如：

Answer 7

(目前Angular 9) 嗨，这是底部两个链接的摘要。您可以在此处获得带有 css class 的调用函数和传递的变量以及在 snackBar 组件中获取它们的值的方法。希望这有帮助

在你希望增加 snackBar 的组件中，"father component" :

import {
  MatSnackBar
} from '@angular/material/snack-bar';
import {
  SnackBarComponent
} from '../../../shared/snack-bar/snack-bar.component';


@Component({
  selector: 'app-father-component',
  templateUrl: './father-.component.html',
  styleUrls: ['./father-editor.component.scss'],
})
export class FatherComponent implements OnInit {

  private _durationInSeconds = 5;

  get durationInSeconds(): number {
    return this._durationInSeconds;
  }

  set durationInSeconds(value: number) {
    this._durationInSeconds = value;
  }

  private _className: string;

  get className(): string {
    return this._className;
  }

  set className(value: string) {
    this._className = value;
  }

  private _mMessage: string;

  get mMessage(): string {
    return this._mMessage;
  }

  set mMessage(value: string) {
    this._mMessage = value;
  }

  constructor(
    private snackBar: MatSnackBar
  ) {}

  ngOnInit(): void {

    // your onInit code
  }

// Calling that function rises the snackBar, from .ts this.openSnackBar()
// From template event <button (click)="openSnackBar()"></button> etc...
// No needs to insert the <app-snack-bar> tag in the template.

  openSnackBar() {
    this.snackBar.openFromComponent(SnackBarComponent, {
      duration: this.durationInSeconds * 1000,
      data: {
        myMessage: this.mMessage,
        antoherVar: 'antoher message'
      },
      // here this.className is a string which value is a Bulma class 'has-text-info', snackbar automatically uses the value from panelClass
      panelClass: this.className
    });
  }

然后是snackBar itSelf的组件，"child component" :

import {
  Component,
  Inject,
  OnInit
} from '@angular/core';
import {
  MAT_SNACK_BAR_DATA
} from '@angular/material/snack-bar';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.scss'],
})
export class SnackBarComponent implements OnInit {

  myMessage: string;
  antoherVar: string;

  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any
  ) {
  // there you get the datas you have passed to the snackbar through the openSnackBar function in the father-component, setting up local properties to their values
    this.myMessage = data.myMessage;
    this.antoherVar = data.antoherVar;
  }

  ngOnInit(): void {}

}

<!--Here we use the local variable set with the datas passed through the data object -->
<!--No needs to setup a class to use the panelClass value passed, it is automatic -->
<span>{{ myMessage }}</span>

Angular 2/4 如何设计风格 angular material 设计小吃店

Angular 2/4 How to style angular material design snackbar

angular-material2

angular