Angular 材料SnackBar Extraclass不'；我好像不工作

朋友们好

我正在努力实现这一目标。我能够让snackbar出现，但似乎无法让配置属性产生任何真正的区别

以下是我的快餐店.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

我的主要绊脚石有两个：第一：我正在努力实现Extraclass属性。我尝试通过传递现有的快餐店类来覆盖它们，并且还尝试传递新类。第二：这是怎么回事？该类是否应该驻留在相应的snack bar.component.css文件中

我真正想要的是一个全面的例子，说明这是如何工作的。material站点上的一个没有实现此属性，因此没有帮助

---

谢谢大家!

回答您的第一个问题：

您需要在组件中设置

enclosuration:viewenclosuration.None

，以便

config.extraClasses

生效。了解

回答您的第二个问题：是，这些类应该在您的

快餐店.component.css

文件中

---

链接到。

第一个问题的答案：

您需要在组件中设置

enclosuration:viewenclosuration.None

，以便

config.extraClasses

生效。了解

回答您的第二个问题：是，这些类应该在您的

快餐店.component.css

文件中

---

链接到。

以下配置适用于我

版本 Angular CLI:6.0.1 角度：6.0.2 材料：6.0.2

步骤1：在src/styles.css中添加样式

步骤2：在openSnackBar（）函数中添加panelClass

---

下面的配置适合我

版本 Angular CLI:6.0.1 角度：6.0.2 材料：6.0.2

步骤1：在src/styles.css中添加样式

步骤2：在openSnackBar（）函数中添加panelClass

---

谢谢@Faisal！它看起来确实有效。但也就是说，当我检查snackbar时，我没有看到在Chrome的styles下出现额外的类。它是否应该出现？@kickinchicken它确实出现了，请查看

标签。请投票，如果答案有帮助，请将其标记为已接受。我的答案不在后面，但你的答案在后面。我只是想在我把它标记为已回答之前确认一下。谢谢你知道为什么这个类出现在快餐店容器类中，而不是作为css类出现吗？它们被添加了，不知道为什么你不能看到Thank@Faisal！它看起来确实有效。但也就是说，当我检查snackbar时，我没有看到在Chrome的styles下出现额外的类。它是否应该出现？@kickinchicken它确实出现了，请查看

标签。请投票，如果答案有帮助，请将其标记为已接受。我的答案不在后面，但你的答案在后面。我只是想在我把它标记为已回答之前确认一下。谢谢你知道为什么这个类出现在快餐店容器类中，而不是作为css类出现吗？它们被添加了，不知道为什么你看不到棱角材质有什么问题？它们总是改变语法：|角材料有什么问题？它们总是改变语法：|

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

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

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

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']**
    });
 }
}