Angular 5 Material Snackbar panelClass 配置 [英] Angular 5 Material Snackbar panelClass config
问题描述
我正在尝试将 panelClass 配置添加到
I am trying to add a panelClass config to the Angular Material Snackbar.
我按照官方网站的文档编写了以下代码.
I wrote the following code, by following documentations from the official websites.
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;"]
});
}
}
我已经将事件绑定到 HTML 按钮.当我删除 panelClass
配置时,持续时间配置工作正常.我正在导入 Google 字体(Open Sans)并尝试将该字体应用到 Snackbar.但是,我收到一个错误:
I have already binded the event to the HTML Button.When I am removing the panelClass
config, then the duration config is working fine.
I am importing a Google Font (Open Sans) and trying to apply the font to the Snackbar. However, I am receiving an error:
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
.甚至,当我尝试添加此内容时,
Maybe, I am not able to understand how to use panelClass
. Even, when I am trying to add this,
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.
我怎样才能修复这个错误并使一切正常工作?请帮忙.
How can I fix this error and get things working? Please help.
PS: 我知道 extraClasses
配置.但是,我不想使用它,因为它在文档中写道,它将很快被弃用.
PS: I am aware with the extraClasses
config. But, I don't want to use it as it is written in the documentation that it will soon be deprecated.
PPS::持续时间配置工作正常.
PPS:: It is working fine with the duration config.
推荐答案
在你的组件 SnackBarComponentExample 中试试:
In your component SnackBarComponentExample try:
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
文件我的样式已正确应用于小吃店.
Where 'red-snackbar'
is a class in your apps main styles.css
file. Strangely I was unable to get the config.panelClass
to work when I was referencing my components associated css file, but once I put the class into the main styles.css
file my styles were applied correctly to the snackBar.
这篇关于Angular 5 Material Snackbar panelClass 配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!