En angular, podemos cambiar fácilmente la propiedad de una clase CSS dinámicamente, como si tuviera una clase
.my-class { background: url('..') }y si utilizo my-class como
<div class="my-class"> ------ </div>ahora, podemos cambiar la imagen de manera efectiva usando
[estilo.fondo]="url(..)"
me gusta
<div class="my-class" [style.background]="getImageUrl()"> ---- </div>Ahora, ¿alguien puede decirme, hay alguna solución si hay varias clases css y tengo que cambiar la URL de fondo de todas ellas? ¿Cómo puedo hacerlo?
Como son mis clases de CSS
.my-class-one { background: url('..') } .my-class-two { background: url('..') } .my-class-three { background: url('..') }y el código HTML es
<div class="my-class-one my-class-two my-class-three"> ---- </div>Allí necesito cambiar toda la URL de la imagen de fondo llamando a métodos angulares
getImageUrlOne() getImageUrlTwo() getImageUrlThree()ngClass se puede usar en 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; }Puede establecer una variable de indicador diferente en cada función y cuando la función llame, establezca un indicador verdadero. establecer ngclass como a continuación:
<div [ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': getImageUrlTwo(), 'my-class-three': getImageUrlThree()}">