Question

我正在寻找在Ionic 2项目中更改标签菜单的颜色，从后端获取值（类型字符串，如：＆＃39;＃ebebeb＆＃39;）。

<ion-tab>标记具有属性[color]=""，该属性从＆＃34; variables.scss＆＃34;中获取值。 sass文件。

在variables.scss中我们可以找到：

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  custom: #ebebeb
);

我添加了变量＆＃34; custom＆＃34;用我的颜色。

好的，现在，我想知道是否可以制作动态变量＆＃34; custom＆＃34;。我在Angular 2打字稿中读取后端（http请求）中的字符串，所以我有全局变量＆＃34; colorString＆＃34;，但我想知道我是否可以更改此SASS变量＆＃34;定制＆＃34;并动态推送colorString变量。

我已经读到这样做是不可能的，但我想知道你的意见，也许是用jQuery知道的？

问候;）

Answer 1

你无法动态修改sass变量。但是如果你想根据后端的值动态修改样式，那么就准备好用javascript搞定了。

这不是一种非常优雅的方式，但是：

<ion-tab [ngStyle]="getStyleFromBg()" ></ion-tab>

在你的ts文件中：

variable : any;
In constructor : get the string from backend & store to variable

getStyleFromBg(){
    if(variable)
         return "background-color : "+variable; // replace background-color with the style attribute
    else
        return "";
}

再一次，这不是一个非常优雅的解决方案＆amp;我建议不要动态地这样做。

更好的方法是使用这些颜色代码和一些sass变量。只需从后端获取您想要使用的这些颜色代码中的哪一个。这是一个更好的方法。

创建动态SASS变量以更改Ionic 2选项卡菜单？

1 个答案: