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方法中切换的类名称，并将其绑定到离子含量组件上即可。

UITableView

.scss

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

Answer 2

使用[class.<YOUR_CLASS_NAME>] = "<SOME CONDITION>"在此处查看其答案

Angular: conditional class with *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>

动态更改元素css属性

4 个答案: