如何在@angular2-material中添加自定义颜色？

Question

我正在尝试在@angular2-material/slide-toggle 中添加我的自定义颜色，如红色和绿色。如果禁用滑动切换，则颜色为红色，如果启用，则颜色为绿色。

我的 component.html 代码在这里：-

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

我的 component.td 代码在这里：-

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

我重复我的问题：-

如何在 angular2 material 滑动切换中添加自定义颜色？
如果禁用滑块切换，则颜色为红色，否则为绿色。

谢谢！

Answer 1

您需要添加您自己的自定义颜色主题，然后您可以设置[color]='primary'等，创建您自己的主题的文档是here

Answer 2

如果条件错误，在你的 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 类以显示所需的颜色。

如何在@angular2-material中添加自定义颜色？

How to add custom color in @angular2-material?

angular

angular2-material