Material SnackBar extraClasses 似乎无法正常工作

Question

你好 Stack Overflow 朋友们！！！

我正在尝试实施 material snackbar component。我能够让快餐栏出现，但似乎无法让配置属性产生任何真正的不同。

这是我的 snack-bar.component.ts 文件中的代码：

openSnackBar(message: string, action: string, type:string){
    let config = new MdSnackBarConfig();
    config.duration = 500000;
    config.direction="rtl";
    config.politeness="assertive";

    if(type == 'Error')
    config.extraClasses=['mat-simple-snackbar','mat-simple-snackbar-action'];
    this.snackBar.open(message, action, config);
  }

唯一似乎可以做任何事情的 config 属性是 duration.

我的主要障碍有两个：第一：我正在努力实现 extraClasses 属性。我试过传递现有的小吃店 classes 以覆盖它们，我也试过传递新的 classes。第二：这应该如何工作？ class 应该驻留在相应的 snack-bar.component.css 文件中吗？

我真正想要的是一个全面的例子来说明这是如何工作的。 material 网站上的那个没有实现这个属性所以它没有帮助。

谢谢！

Answer 1

回答你的第一个问题：

您需要在组件中设置encapsulation: ViewEncapsulation.None，config.extraClasses才能生效。阅读 ViewEncapsulation。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

回答您的 第二个 问题：是的， 类应该在您的 snack-bar.component.css 文件中。

Link 到 working demo.

Answer 2

以下配置适合我。

版本 Angular命令行界面：6.0.1 Angular：6.0.2 Material: 6.0.2

第1步：在src/styles中添加样式。css

.snack-color{
    background-color:purple;
}

第二步：在openSnackBar()函数中添加panelClass

import { Component } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import { InformationComponent } from '../header/information/information.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent  {

  constructor(public snackBar: MatSnackBar) { }

 openSnackBar() {

    this.snackBar.openFromComponent(InformationComponent, {
      duration: 5000,
      **panelClass: ['snack-color']**
    });
 }
}

Material SnackBar extraClasses 似乎无法正常工作

Material SnackBar extraClasses doesn't seem to be working

angular-material

angular-material2

angular