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

Question

在angular中，我们可以很容易地动态改变CSS类的属性，就像我有一个类

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

如果我使用my-class作为

<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;
}

Answer 2

您可以在每个函数中设置不同的标志变量，当函数调用时设置一个标志为true。按如下方式设置ngclass:

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