Question

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

唯一似乎做任何事情的配置属性是持续时间。

我的主要绊脚石是双重的：第一：我正在努力实现extraClasses属性。我试过通过现有的小吃店课程来覆盖它们，我也尝试过新课程。第二：这应该如何运作？该类是否应位于相应的 snack-bar.component.css 文件中？

我真正想要的是一个如何运作的综合例子。材料网站上的那个没有实现这个属性所以它没有帮助。

谢谢！

Answer 1

回答第一个问题：

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

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

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

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

链接到working demo。

Answer 2

以下配置对我有用。

<强>版本 Angular CLI：6.0.1 Angular：6.0.2 材料：6.0.2

第1步：在 src / styles.css

中添加样式

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

第2步：在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']**
    });
 }
}

材料SnackBar extraClasses似乎不起作用

2 个答案: