web-dev-qa-db-ja.com

Angular 5 Material Snackbar panelClass config

panelClass configを Angular Material Snackbar に追加しようとしています。

公式Webサイトのドキュメントに従って、次のコードを作成しました。

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）をインポートし、そのフォントをスナックバーに適用しようとしています。ただし、エラーが表示されます。

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 configを認識しています。しかし、私はそれがすぐに廃止されるドキュメントに書かれているようにそれを使用したくありません。

PPS：：持続時間の設定でうまく機能しています。

angulartypescriptangular-material
7
abhijeetps

コンポーネントSnackBarComponentExampleで試してください：

saveButtonClick = () =>{
  let config = new MatSnackBarConfig();
  config.duration = 5000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("This is a message!", "ACTION", config);
}

どこ - 'red-snackbar'はアプリのクラスですmain styles.cssファイル。不思議なことに、私はconfig.panelClass cssファイルに関連付けられたコンポーネントを参照していたときに機能しましたが、クラスをメインに入れたらstyles.cssファイルを私のスタイルがスナックバーに正しく適用されました。

17
Narm

私の場合、上記のすべては機能しません。 cssに!importantを追加すると動作します：

.error-snackbar {
  background-color: Fuchsia !important;
}
4
krzyjez

panelClassは次のように定義されます

panelClass：文字列|ストリング[]

スナックバーコンテナに追加される追加のCSSクラス。

スタイルではなくクラスを追加するために使用されます。

複雑なCSSスタイルをそこに入れなければならなかった場合の配列のサイズを想像してください。

そのため、CSSでスタイルを定義する必要があり、その場合にのみクラスをバーに適用できます。

panelClass: ['first-class', 'second-class'];
2
gyc

In angular 7クラスの前で:: ng-deepを使用するとうまくいきました。

::ng-deep  .snackBar-fail {
    color: #ffffff !important;
    background-color: #cc3333 !important;
}
0
Lucky