Ionic ion-toggle 和 ion-checkbox 的动态颜色变化（在运行时使用颜色字符串）答案

【问题标题】：Dyamic Color Change of Ionic's ion-toggle and ion-checkbox (use color string at runtime)Ionic ion-toggle 和 ion-checkbox 的动态颜色变化（在运行时使用颜色字符串）
【发布时间】：2017-10-22 07:19:38
【问题描述】：

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

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

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

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

【问题讨论】：

标签： ionic-framework ionic2

【解决方案1】：

你试过这个吗：

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

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

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

或者，您可以在 SCSS 文件中定义两个 CSS 类，分别称为 red-toggle 和 black-toggle。然后你可以：

<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转译后会有两个子节点，你想动态改变这些子节点的样式。这些节点是切换图标和切换内部：

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

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

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

免责声明：此代码相当老套，可能无法在 Ionic 的未来版本中正常工作！

【讨论】：

很早就试过了。第二个解决方案只有在我知道要提前提供什么颜色的情况下才有效 - 情况并非总是如此......您的第一个解决方案不起作用，因为“ion-toggle”组件是由它自己的模板组成并且不绑定子对象的样式属性...
@MilanRubenKappen：我编辑了我的答案。 ngStyle 应该给你你想要的。
除了 background-color 之外，您可以更改任何其他 css 属性
如果您发布代码会有所帮助。其中一种方法可以发挥作用。
实际上将代码归结为非常基本的代码：这会导致以下结果：image of behaviour

【解决方案2】：

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

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

预定义的颜色可以在$colors下的theme/variables.scss文件中设置

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

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

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

【讨论】：