Angular 5 Material Snackbar面板的类配置 [英] Angular 5 Material Snackbar panelClass config

问题描述

我正在尝试将 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;"]
    });
  }
}

我已经将事件绑定到HTML Button.当我删除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 文件中，样式正确地应用于了快餐栏.

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

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.

Maybe, I am not able to understand how to use panelClass. Even, when I am trying to add this,

panelClass: ["color:white;"];

It is still showing the error:

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: 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:: It is working fine with the duration config.

解决方案

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

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面板的类配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！