Wie füge ich eine benutzerdefinierte Farbe in @ angular2-material hinzu?

Question

Ich versuche meine benutzerdefinierte Farbe wie rot und grün in @ angular2-material/slide-toggle hinzuzufügen. Wenn der Schieberegler deaktiviert ist, ist die Farbe rot und wenn aktiviert, ist die Farbe grün.

Mein component.html Code hier: -

<md-slide-toggle 
     (change)="testChange($event)" 
     [color]="myColor"> 
</md-slide-toggle> 

Mein component.td Code hier: -

myColor; 
testChange(event) { 
    alert(event) 
    if(event == true) 
    { 
    this.myColor = "#006400"; 
    } 
    else 
    { 
    this.myColor = "#FF0000"; 
    } 
} 

ich meine Fragen wiederholen: -

1. Wie benutzerdefinierte hinzufügen Farbe in angular2 Material Slide-Toggle?
2. Wenn Schieberegler deaktiviert ist, ist die Farbe rot, ansonsten grün.

Vielen Dank!

Answer 1

Sie benötigen eigene Farb Thema hinzufügen möchten, dann können Sie [color]='primary' etc, die Dokumentation setzen Sie Ihr eigenes Design zu erstellen sind here

Answer 2

In Ihrem TS-Datei, wenn die Bedingung falsch ist:

myColor; 
testChange(event) { 
    alert(event) 
    if(event.checked == true) 
    { 
    this.myColor = "#006400"; 
    } 
    else 
    { 
    this.myColor = "#FF0000"; 
    } 
} 

Sie können auch versuchen mit [ngClass] = "checked === true? 'RedColorClass': 'greenColorClass'"

Setzen Sie Ihre Klassen redColorClass und greenColorClass in component.css, um die gewünschten Farben anzuzeigen.