Question

在我的应用中，我具有可以打开的电影详细信息，并且我希望该详细信息的按钮与该电影相匹配。

例如，在电影《回到未来》中，我的数据为colors = ["#000000","#123123"]。

如果我进行<div [ngStyle]="{'background-color': movie?.colors[0]}">，则div将具有我想要的颜色。

我的问题是，在Ionic中，如何更改variables.scss以具有这些颜色（当我们打开新电影时会更新）？

因为我们无法使用自定义CSS修改标签页，所以我必须将其添加到variables.scss ...

Answer 1

如果您想在运行时更新任何css颜色或值，例如字体大小（如sass变量），请使用 css变量，这样，您可以在运行时更新任何css属性值（如果它基于在css变量上（如我的示例中的颜色），但是它可以是任何css值

考虑此示例

style.css

:root {
--color : red;
}

 * {
   color:var(--color)
 }

AppComponent

  colorList = ['green', 'blue'];

  updateColor(color) {
    document.documentElement.style.setProperty(`--color`, color);
  }

模板

<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>

stackblitz demo

sass变量将在构建时编译到那里的值，因此它们不能在运行时重用

Answer 2

在大多数情况下，通过用变量映射元素来以编程方式更改元素的CSS值很方便。我们希望每次更新变量时都更改CSS值，不仅通过this.ngZone.run()。

<div class="progress" [style.height]=currentLevelPercentage>

此示例说明了如何将div元素（类 progress ）的height CSS属性映射到变量currentLevelPercentage并动态更改其值。 currentLevelPercentage是TypeScript文件中必须强制存在的变量。

Answer 3

对于那些想知道如何在超级标签（离子性）中更改每个标签背景颜色的人来说，这是我的4个标签代码（我现在也可以使用代码更改高度和宽度^^）。

在tabs-page.scss中：

  :root {
    --color1: white;
    --color2: white;
    --color3: white;
    --color4: white;
  }

  super-tab-button:nth-of-type(1) {
    background-color: var(--color1)
  }

  super-tab-button:nth-of-type(2) {
    background-color: var(--color2)
  }

  super-tab-button:nth-of-type(3) {
    background-color: var(--color3)
  }

  super-tab-button:nth-of-type(4) {
    background-color: var(--color4)
  }

在tabs-page.html中：没什么特别的

在tabs-page.ts中：

constructor(public navCtrl: NavController, public navParams: NavParams) {
    document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
    document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
    document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
    document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
  }

谢谢@malbarmawi！

Answer 4

只是一个关于动态更改样式的想法。这是我正在使用的

<span [style.width]=foo></span>

更改.ts文件中“ foo”的值 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding

Answer 5

试试这个

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

在Ionic 3中动态更改CSS值

5 个答案: