Ionic离子切换和离子复选框的动态颜色变化（在运行时使用颜色字符串）

Question

我正在尝试在运行时动态更改Ionic的Ion-Toggle和Ion-Checkbox的颜色。我知道我可以将它更改为预先定义的sass变量，如下所示：

<ion-toggle [color]="somePredefinedColor"></ion-toggle>

其中“somePredefindedColor”是预定义的sass变量的字符串...但是因为我的应用程序中有一个部分适应公司的公司设计颜色（它从服务器获取为十六进制字符串），这是不可能。

我最接近的是通过组件的类“.toggle-icon”查询文档并设置其背景颜色。这在第一次加载时起作用，但是一旦再次加载页面，它就会回退到预定义的颜色......

Answer 1

你试过这个：

<ion-toggle [style.color]="colorVariable"></ion-toggle>

其中colorVariable是.ts文件中组件中的变量，您可以动态更改它：

if (this.redCondition)
    this.colorVariable = 'red';
else
    this.colorVariale = 'black';

或者，您可以在SCSS文件中定义两个CSS类，将其称为红色切换和黑色切换。然后你可以：

<ion-toggle [class.red-toggle]="redCondition" [class.black-toggle]="!redCondition"></ion-toggle>

这些方法分别称为style and class binding。

如果要动态更改css样式中的值，可以使用ngStyle directive：

 [ngStyle]="{ 'background-color': hexColorString}"

修改

问题是，在传递之后ion-toggle将有两个子节点，并且您希望动态更改这些子节点的样式。这些节点是toggle-icon和toggle-inner：

这不是最干净的方法，但您可以使用以下打字稿代码，并对其进行修改以使颜色动态变化：

var div1 = document.getElementById('mytoggle').getElementsByTagName('div');
if(div1[0]){ 
   div1[0].style.backgroundColor = '#0F0';

   var div2 = div1[0].getElementsByTagName('div'); 
   if(div2[0])
     div2[0].style.backgroundColor = '#00F';
}

请注意，您必须设置＆＃34; mytoggle＆＃34;作为html文件中ion-toggle元素的id。

免责声明：此代码相当骇人，可能无法正常使用Ionic的未来版本！

Answer 2

您只需要在接收变量的动态属性上添加方括号。

<ion-toggle [color]="somePredefinedColor"></ion-toggle>

可以在theme/variables.scss

下的$colors文件中设置预定义颜色

$colors: (
   primary:#48B0F7,
   secondary:#10CFBD,
   ....
   somePredefinedColor:#000
)

然后可以将其添加到[color]属性

<ion-toggle [color]="somePredefinedColor"></ion-toggle>