如何在ionic3的scss文件中使用组件变量答案

【问题标题】：how to use a component variable in my scss file in ionic3如何在ionic3的scss文件中使用组件变量
【发布时间】：2018-04-18 18:10:11
【问题描述】：

我正在尝试根据用户所需的主题颜色更改我的应用主题颜色，例如，我有多个用户并且每个用户都有自己的应用主题颜色，如果用户登录到我的应用，则必须应用该用户主题颜色到我的整个应用程序，因此基于该主题值，我的应用程序字体和所有切换都需要更改，截至目前，我尝试通过调用我的组件中的函数来使用[ngStyle]，如下所示

home.html

<div [ngStyle]="setBgColor()">
  <p>{{myName}}</P>
  <p>{{myPlace}}</P>
  <p>{{myPhone}}</P>
</div>

home.ts

 setBgColor(){
  return {'background-color': userThemeColor}
 }

但现在我想将ion-toggle 颜色和ion-slidespagination 项目符号颜色更改为userThemeColor，我该怎么做呢

我尝试了什么

<ion-toggle (ionChange)="toggleChange()" [ngStyle]="setBgColor()"></ion-toggle> 这里它不会改变切换，所以现在我想将我的主题颜色值导出到 scss 文件，我必须使用下面的颜色

.toggle-md .toggle-icon{
   background-color:{{userThemeColor}}
 }

【问题讨论】：

您想更改主题仅活动页面或完整应用页面
完整的应用页面@Utpaul
您是否在 css 调试器中检查了为什么颜色未应用于您的切换？它们是否被某些东西覆盖了？

标签： css angular sass ionic3

【解决方案1】：

据我所知，您不能在 scss 文件中使用动态变量。

替代方案：使用 JQuery 的（脏）解决方案是：

index.html

<head>
  ...
  <style id="extraCSS" type="text/css"></style>
</head>

custom.ts

var customColor = 'rgb(255, 50, 50)';
var customColorWithTransparency = 'rgba(255, 50, 50, 0.75)';

$('#extraCSS').text(
    '.toggle-checked .toggle-icon { background-color: ' + customColorWithTransparency + ' !important;}' +
    '.toggle-checked .toggle-inner { background-color: ' + customColor + ' !important;}');
}

您不能在运行时动态更改ion-toggle 或ion-checkbox 中的color。相反，您可以像这样设置预定义的（静态）sass 变量：

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

...但是，因为您不能设置hex-color-string，所以不可能将服务器/API 中的color directive 更新为十六进制字符串（目前）。

【讨论】：

它没有改变颜色，返回颜色没有附加到切换@Mario Padilla
我更新了答案。第一部分向您展示如何动态更新 ion-toggle [color]。第二部分解释了如何获取全局“scss”变量@Midhunsai
对我来说，userCustomColor 在用户登录时动态来自 api，在您的回答中，它被硬编码在 variable.scss 中，我需要它动态更改 @Mario Padilla
@Midhunsai 我更新了答案。我用 JQuery 给了你一个解决方案。我测试了它，它正在工作。