具有不同条件的 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() {&nbsp; &nbsp; this.someCondition = !this.someCondition;&nbsp; &nbsp; if (this.someCondition === true) {&nbsp; &nbsp; &nbsp; !this.displayClass.includes('someClass') ?&nbsp;&nbsp; &nbsp; &nbsp; this.displayClass.push('someClass') : '';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; !this.displayClass.includes('someOtherClass') ?&nbsp;&nbsp; &nbsp; &nbsp; this.displayClass.push('someOtherClass') : '';&nbsp; &nbsp; }}html<div class="row"[ngClass]="displayClass"></div><button (click)="onSomeConditionSetting()">Change Class</button>我希望你能明白。您也可以应用自己的逻辑来删除类。

Answer 3

我没发现那么长。老实说，你最好保持这种状态。使用函数将在每个周期触发它。使用布尔值仅在值更改时触发。这就是我要做的<div class="row case" [ngClass]="{&nbsp; 'case1': displayUseShortWarning,&nbsp; 'case2': displayUseShortWarning && displaySellInCalifornia,&nbsp; 'case3': !displayNoWarningOnProduct&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}"></div>.case {&nbsp; &nbsp; position: absolute;}.case1 {&nbsp; &nbsp; top: 0;}.case2 {&nbsp; &nbsp; top: 55px;}.case3 {&nbsp; &nbsp; top: 35px;}