Question

我有一个简单的问题，但无法通过。我有两个CSS类，只是背景图像不同。当我单击它时，我想切换div背景，并保持该类，直到我不切换到另一个div（菜单项）。这是所需的代码：

.login-switch-button{
    background-image: url("..\..\assets\images\login_button.png"); 
    height: 50px;
    width: 195px;
    float: left;

}
.register-switch-button{
    background-image: url("..\..\assets\images\register_button.png"); 
    height: 50px;
    width: 195px;
    margin: auto;
    float: left;
}

.login-switch-button-active{
    background-image: url("..\..\assets\images\login_button_hover.png"); 
    height: 50px;
    width: 195px;
    float: left;
}

.register-switch-button-active{
    background-image: url("..\..\assets\images\register_button_hover.png"); 
    height: 50px;
    width: 195px;
    float: left;
}

非常简单的CSS 这是一个.ts文件

 isLoginActive: boolean = true;
  public login_class = {
    "login-switch-button": !this.isLoginActive,
    "login-switch-button-active": this.isLoginActive
  }

  public register_class = {
    "register-switch-button": this.isLoginActive,
    "register-switch-button-active": !this.isLoginActive
  }

  switch_to_login() {
    this.isLoginActive = true;
  }

  switch_to_register() {
    this.isLoginActive = false;
  }

还有HTML代码

  <div (click)="switch_to_login()" [ngClass]="login_class"></div>
  <div  (click)="switch_to_register()" [ngClass]="register_class"></div>

在初始化站点上，login_button处于活动状态，两者的背景均正确。但是单击其中任何一个都不会改变。 isLoginActive值正确更改，因此onClick正常运行。我想我想念有关ngClass的关键知识

Answer 1

您可以基于组件属性值来应用类。

<div (click)="switch_to_login()" [ngClass]="isLoginActive ? 'css-class1' : 'css-class2'"></div>

如果isLoginActive值为true，则将应用'css-class1'。如果isLoginActive值为false，则将应用'css-class2'。

Angular 6 ngClass不打开布尔值

1 个答案: