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

我试图在运行时动态更改Ionic的离子切换和离子复选框的颜色。我知道我可以将其更改为预定义的sass变量，如下所示：

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

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

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

您是否尝试过以下方法：

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

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

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

编辑：

问题是Transfile后的

ion-toggle

将有两个子节点，您希望动态更改这些子节点的样式。这些节点是切换图标和内部切换：

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

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

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';
}

请注意，您必须将“mytoggle”设置为html文件中ion toggle元素的id

---

免责声明：此代码相当粗糙，可能无法与未来版本的Ionic一起正常工作

只需在接收变量的动态属性上添加方括号即可

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

然后可以将其添加到

[color]

属性中

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

很早就试过了。第二个解决方案只有在我知道要提供什么颜色的情况下才起作用-情况并非总是如此。。。您的第一个解决方案不起作用，因为“ion toggle”组件由它自己的模板组成，并且没有将样式属性绑定到它的子对象…@MilanRubenKappen:我编辑了我的答案

ngStyle

应该可以满足您的需要。您可以更改除背景色之外的任何其他css属性。如果您发布代码，这将有所帮助。其中一种方法OAuth可以正常工作。实际上，将代码归结为非常基本的内容：这将导致以下结果：

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

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