我正在尝试添加 panelClass配置到 Angular Material Snackbar .
我根据官方网站的文档编写了以下代码。
import { Component, OnInit } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
import { Location } from '@angular/common';
@Component({
selector: 'snack-bar-component-example',
templateUrl: './snack-bar-component-example.html',
styleUrls: ['./snack-bar-component-example.css']
})
export class SnackBarComponentExample implements OnInit {
constructor(public snackBar: MatSnackBar) { }
ngOnInit() {
}
saveButtonClick = () =>{
this.snackBar.open("This is a message!", "ACTION", {
duration: 3000,
panelClass: ["font-family:'Open Sans', sans-serif;"]
});
}
}
我已经将事件绑定(bind)到 HTML 按钮。当我删除 panelClass
配置时,持续时间配置工作正常。
我正在导入 Google 字体 (Open Sans) 并尝试将该字体应用到 Snackbar。但是,我收到一个错误:
ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('font-family:'Open Sans', sans-serif;') contains HTML space characters, which are not valid in tokens.
也许,我无法理解如何使用 panelClass
。甚至,当我尝试添加这个时,
panelClass: ["color:white;"];
仍然显示错误:
ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.
如何修复此错误并使一切正常运行?请帮忙。
PS:我知道 extraClasses
配置。但是,我不想使用它,因为它在文档中写到它很快就会被弃用。
PPS::持续时间配置工作正常。
最佳答案
在你的组件 SnackBarComponentExample 中尝试:
saveButtonClick = () =>{
let config = new MatSnackBarConfig();
config.duration = 5000;
config.panelClass = ['red-snackbar']
this.snackBar.open("This is a message!", "ACTION", config);
}
'red-snackbar'
是您应用程序主 styles.css
文件中的一个类。奇怪的是,当我引用我的组件关联的 css 文件时,我无法让 config.panelClass
工作,但是一旦我将类放入主 styles.css
文件我的样式已正确应用到 snackBar。
关于Angular 5 Material Snackbar 面板类配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47901127/