在Angular中动态更改多个CSS类中的多个CSS属性

Question

在 Angular 中，我们可以轻松地动态更改 CSS 类的属性，就像我有一个类一样

.my-class {
  background: url('..')
}

如果我使用我的班级作为

<div class="my-class">
  ------
</div>

现在，我们可以通过使用来有效地改变图像

[style.background]="url(..)"

喜欢

<div class="my-class" [style.background]="getImageUrl()">
    ----
</div>

现在，谁能告诉我，如果有多个 css-class 并且我必须全部更改背景 url，有什么解决方案，我该怎么做？

就像我的 CSS 类一样

.my-class-one {
  background: url('..')
}

.my-class-two {
  background: url('..')
}

.my-class-three {
  background: url('..')
}

HTML 代码是

<div class="my-class-one my-class-two my-class-three">
  ----
</div>

我需要通过调用 Angular 方法来更改所有背景图片的 URL

getImageUrlOne()
getImageUrlTwo()
getImageUrlThree()

Answer 1

ngClass可以在html中使用

[ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': false, 'my-class-three': false}"

JS

getImageUrlOne(){
   //.... logic to decide my-class-one should be used or not
   return true;
}