使用评估表达式的ngClass删除普通类 [英] ngClass using evaluated expression drops common classes

问题描述

当我将ngClass与具有公共类的多个表达式一起使用时，当表达式从false变为true时，将删除公共类c1:

When I use ngClass with multiple expressions with common classes, the common class c1 is dropped when the expression changes from false to true:

<span [ngClass]="{'c1 c2' : showTwo, 'c1 c3' : showThree, 'c1 c4' : showFour}" ></span>

要克服这一点，我必须使用标准的class属性指定通用类.

To overcome this I have to specify the common class using the standard class attribute.

<span class="c1" [ngClass]="{'c2' : showTwo, 'c3' : showThree, 'c4' : showFour}" ></span>

是否有更好的方法来实现这一目标?还是Angular2的错误?

Is there a better way of achieving this? or is it a bug with Angular2?

推荐答案

不支持.

https://github.com/angular/angular/issues/5763# issuecomment-163710342

因此，我们有点说我想同时拥有和不拥有foo课"，这显然是没有意义的.这是类添加/删除的顺序，将导致不同的结果-这不是确定性的.

So we are kind of saying "I want to have and not have foo class at the same time" which obviously doesn't make sense. It is an order of class addition / removal that will lead to different results - this is not something deterministic.

我想您需要将代码更改为:[ng-class]="{'active has-error': isOn, 'disabled has-success': isDisabled, 'has-feedback': isOn || isDisabled}".

I guess you need to change your code to be sth like: [ng-class]="{'active has-error': isOn, 'disabled has-success': isDisabled, 'has-feedback': isOn || isDisabled}".

在github讨论中进一步

Further down the github discussion

[ng-class]="{'active has-error has-feedback': isOn, 'disabled has-success has-feedback': isDisabled}"可以细分为:

1.1:如果isOn的值为true，则添加活动类，has-error和has-feedback.

1.1: If isOn evaluates to true, add classes active, has-error and has-feedback.

1.2:如果isOn的值为false，则删除活动类，具有错误和具有反馈的类.

1.2: If isOn evaluates to false, remove classes active, has-error and has-feedback.

2.1:如果isDisabled的值为true，则添加禁用的类，具有成功和具有反馈的类.

2.1: If isDisabled evaluates to true, add classes disabled, has-success and has-feedback.

2.2:如果isDisabled的计算结果为false，则删除禁用的类，具有成功和具有反馈的类.

2.2: If isDisabled evaluates to false, remove classes disabled, has-success and has-feedback.

无法跟踪将类添加到元素的classList的方式或添加者，这不是ng-class的目的.它只是应用它知道的规则.

There is no way to keep track of how the classes were added to the element's classList or who added them and it's not ng-class' purpose to do so. It just applies the rules it knows about.

这篇关于使用评估表达式的ngClass删除普通类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！