使用求值表达式的ngClass会删除常见类

Question

当我使用带有公共类的多个表达式的ngClass c1时,当表达式从false变为true时,将删除公共类:

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

为了解决这个问题,我必须使用标准class属性指定公共类.

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

有没有更好的方法来实现这一目标？或者它是Angular2的错误？

Answer 1

这不受支持.

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

所以我们有点说"我想要同时没有foo上课",这显然没有意义.这是一个类添加/删除的顺序,将导致不同的结果 - 这不是确定性的东西.

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

进一步讨论github

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

1.1:如果isOn的计算结果为true,则添加active,has-error和has-feedback.

1.2:如果isOn计算结果为false,则删除活动类,has-error和has-feedback.

2.1:如果isDisabled的计算结果为true,则添加禁用的类,has-success和has-feedback.

2.2:如果isDisabled的计算结果为false,则删除禁用的类,has-success和has-feedback.

没有办法跟踪类如何被添加到元素的classList或添加它们,并且这不是ng-class的目的.它只是应用它所知道的规则.