ngClass 使用评估表达式删除常见类

Question

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

<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，则添加 disabled、has-success 和 has-feedback 类。

2.2：如果 isDisabled 评估为 false，则删除已禁用、已成功和已反馈的类。

没有办法跟踪类是如何添加到元素的 classList 或谁添加的，这不是 ng-class 的目的。它只是应用它知道的规则。

Answer 2

为什么要动态应用/删除一个类两次？如果总是需要 c1 类，请将其添加到 class="c1" 属性中，并将 [ngClass] 用于任何有条件的内容。不是 bug，它是 html 和 css 的构建块。