如何在@angular2材质中添加自定义颜色？

我正在尝试在@angular2材质/幻灯片切换中添加我的自定义颜色，如红色和绿色。如果禁用滑动切换，则颜色为红色，如果启用，则颜色为绿色

我的component.html代码如下：-

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

我重复我的问题：-

如何在angular2材质幻灯片切换中添加自定义颜色

如果滑块切换被禁用，则颜色为红色，否则为绿色

---

谢谢

您需要添加您自己的自定义颜色主题，然后您可以设置

[color]='primary'

等，如果条件错误，则创建您自己主题的文档位于ts文件中：

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

您还可以尝试使用[ngClass]=“checked==true”“redColorClass”“：“greenColorClass”

---

并在component.css中设置redColorClass和greenColorClass类，以显示所需的颜色。

我不是添加自定义颜色主题，而是只更改颜色。我是用css背景色编写的，所以它可以工作，但write color=red，所以它不工作。我正在尝试只改变幻灯片切换的颜色。然后它会稍微复杂一点，因为正如乔·基恩建议的那样，您将不得不使用自定义主题。

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