wake-up-neo.net

Angular 5 Material Snackbar panelClass config

Ich versuche, eine panelClass config zur Angular Material Snackbar hinzuzufügen.

Ich habe den folgenden Code geschrieben, indem ich den Dokumentationen der offiziellen Websites folgte.

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

Ich habe das Ereignis bereits an den HTML-Button gebunden. Wenn ich die panelClass config entferne, funktioniert die Dauer der Konfiguration gut .. Ich importiere eine Google-Schriftart (Open Sans) und versuche, die Schriftart auf die Snackbar anzuwenden. Ich erhalte jedoch eine Fehlermeldung:

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.

Vielleicht kann ich nicht verstehen, wie man panelClass verwendet. Selbst wenn ich versuche, dies hinzuzufügen, 

panelClass: ["color:white;"];

Es wird immer noch der Fehler angezeigt:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.

Wie kann ich diesen Fehler beheben und die Dinge zum Laufen bringen? Bitte helfen.

PS: Ich bin mir der extraClasses config bewusst. Aber ich möchte es nicht verwenden, da es in der Dokumentation steht, dass es bald veraltet sein wird.

PPS:: Es funktioniert gut mit der Zeitdauer config.

6
abhijeetps

Versuchen Sie in Ihrer Komponente SnackBarComponentExample: 

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

}

'Red-snackbar' ist eine Klasse in der Datei styles.css Ihrer Apps-Hauptdatei. Seltsamerweise konnte ich die config.panelClass nicht zum Laufen bringen, als ich auf meine mit der Komponente verbundene CSS-Datei verwies, aber sobald ich die Klasse in die Datei styles.css eingefügt habe, wurden meine Stile korrekt auf die snackBar angewendet.

13
Narm

In meinem Fall funktioniert alles oben nicht. Es fängt an zu arbeiten, wenn ich !important in css hinzufüge:

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

panelClass ist definiert als

panelClass: string | Zeichenfolge []

Zusätzliche CSS-Klassen, die dem Snack-Bar-Container hinzugefügt werden sollen.

Es wird verwendet, um eine Klasse hinzuzufügen, nicht einen Stil.

Stellen Sie sich die Größe des Arrays vor, wenn Sie komplexes CSS-Styling dort einfügen mussten.

Sie müssen also Ihren Stil in einer CSS definieren und erst dann können Sie eine Klasse auf die Leiste anwenden:

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

In eckig 7 arbeitete ich mit :: ng-deep vor dem Unterricht für mich.

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