Angular 2/4如何设计角料设计快餐栏

Question

我是Angular2/4和角打字稿的新手。我想对角材设计进行造型快餐板例如将背景颜色从黑色和字体颜色更改为其他内容。
我该如何解决“小吃店”的风格？

我在服务/核心中有物料设计快餐栏，并且根据需要在每个组件中调用它。

如何在Angular 2/4中设计Angular 2材质设计“小吃店”？我已经包括下面的代码片断：

服务/芯

> 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如果你想尝试。