Динамическое изменение свойства элемента css

Question

Мне нужно динамически установить фоновое изображение. Поскольку ion-content является элементом, как я могу это сделать? Если это класс CSS, то я могу сделать так

[class]="cssClassName" и я могу изменить имя класса в файле ts. Но как я могу это сделать?

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       // has back ground
        break;
      case "com2":
       //no back ground
        break;
      default:
    }
  }

.html

<ion-content>

</ion-content>

.scss

ion-content {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;

}

Answer 1

Вы можете иметь два разных класса CSS с желаемым фоном. Это должно иметь переменная класса для хранения имени класса, которое вы переключаете в методе init, и привязка его к компоненту ion-content.

<ion-content [ngClass]="hotelBackground">
  ...
</ion-content>

ngOnInit() { this.init(); }
hotelBackground: string;
init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       this.hotelBackground = 'com1';
       break;
      case "com2":
       this.hotelBackground = 'com2';
       break;
      default:
    }
  }

.scss

.com1 {background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; } 

.com2{ background: none} 

Answer 2

использовать [class.<YOUR_CLASS_NAME>] = "<SOME CONDITION>" См. Ответ здесь

Угловой: условный класс с * ngClass для справки

Answer 3

Я добился этого примерно так:

Примечание: Очень важная часть здесь это ion-content.background-image

.scss

ion-content.background-image {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;       
}

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
        this.cssClassName = "";
        break;
      case "com2":
        this.cssClassName = "background-image";
        break;
      default:
    }
  }

.html

 <ion-content [ngClass]="cssClassName">

    </ion-content>

Answer 4

что-то вроде этого может работать:

$(document).ready(function() {
  $("button").click(function() {
    $(".content1").toggleClass("active");
  });
});

.content1.active {
  background-image: url('../images/light.png');
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Clicky</button>
<div class="content1"> Hello </div>