具有不同条件的 ngclass

Question

我有一个 div class="row"，我想根据一些可变情况制作一些 css 样式。我就是这样做的    <div class="row"[ngClass]="{  'case1': displayUseShortWarning === true,  'case2': displayUseShortWarning === true && displaySellInCalifornia === true,  'case3': displayNoWarningOnProduct === false          }"</div>.case1{    position: absolute;    top: 0;}.case2{    position: absolute;    top: 55px;}.case3{    position: absolute;    top: 35px;}我的问题是如何用不同的代码做同样的事情？我不喜欢 ngClass 中有很多代码

Answer 1

另一种选择是使用自定义指令，该指令通过使用Renderer2. 

Answer 2

.ts 文件

displayClass = [];

someCondition = false;

onSomeConditionSetting() {

    this.someCondition = !this.someCondition;

    if (this.someCondition === true) {

      !this.displayClass.includes('someClass') ? 

      this.displayClass.push('someClass') : '';

    } else {

      !this.displayClass.includes('someOtherClass') ? 

      this.displayClass.push('someOtherClass') : '';

    }

}

html

<div class="row"

[ngClass]="displayClass">

</div>

<button (click)="onSomeConditionSetting()">Change Class</button>

我希望你能明白。您也可以应用自己的逻辑来删除类。

Answer 3

我没发现那么长。老实说，你最好保持这种状态。使用函数将在每个周期触发它。使用布尔值仅在值更改时触发。

这就是我要做的

<div class="row case" [ngClass]="{

  'case1': displayUseShortWarning,

  'case2': displayUseShortWarning && displaySellInCalifornia,

  'case3': !displayNoWarningOnProduct          

}">

</div>

.case {

    position: absolute;

}

.case1 {

    top: 0;

}

.case2 {

    top: 55px;

}

.case3 {

    top: 35px;

}