在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>

在那里我需要通过调用角度方法来更改所有背景图片的 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;
}

Answer 2

您可以在每个函数中设置不同的标志变量，并在函数调用时将一个标志设置为真。 设置ngclass如下：

<div [ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': getImageUrlTwo(), 'my-class-three': getImageUrlThree()}">