Question

我想在离子4中动态更改--background颜色样式属性。这是我的尝试：

<ion-content [class]="ionContentClass">
  <a (click)="changeColor1()">Change color 1</a>
  <a (click)="changeColor1()">Change color 1</a>
</ion-content>

我用：

changeColor1() {
  this.ionContentClass = "ionContentColor1"
}
changeColor2() {
  this.ionContentClass = "ionContentColor2"
}

然后在CSS中：

.ionContentColor1 {
  --background: #000;
}
.ionContentColor1 {
  --background: #fff;
}

但是它不起作用，应用程序似乎坏了。有没有标准的方法可以实现这一目标？

Answer 1

我认为您没有正确地告诉角度值已更改。

Angular负责使用组件中填充的值来更新渲染的模板（dom），但是当您直接更改值而又不让angular知道它已被更新时，它永远不会重新渲染dom。

您可以通过多种方式解决此问题，将值设为Subject并在html中预订（我建议BehaviorSubject或ReplaySubject），或者导入changeDetectorRef并告知进行了角度更改

Answer 2

这不是问题，因为Ionic现在使用Css变量。 ;）

您还可以通过向其添加颜色属性来更改离子含量的背景：

<ion-content color="primary">

这是理想行为的原因，在此处解释 @brandyscarney ：

ion-content background can't be set with css background property

也，尝试这个。

<ion-content padding [ngClass]="{ 'bg-red': changeColorVariableFromComponent }">
   ...
</ion-content>

，让我知道它对您有用。

最诚挚的问候。

Answer 3

使用此代码动态设置背景色

<ion-content style="--background: {{classobject.color_name_or_code}};--ion-text-color: #000;">

如何动态更改背景离子含量的颜色

3 个答案: