ngClass ausgewertet unter Verwendung des Ausdrucks fällt gemeinsamen Klassen

Question

Wenn ich ngClass mit mehreren Ausdrücken mit gemeinsamen Klassen verwenden, die gemeinsame Klasse c1 fallen gelassen wird, wenn die Expression Änderungen von false auf true:

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

Um dies zu überwinden, muss ich angeben die allgemeine Klasse, die das Standardattribut class verwendet.

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

Gibt es einen besseren Weg, dies zu erreichen? oder ist es ein Bug mit Angular2?

Answer 1

Das wird nicht unterstützt.

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

So sind wir Art zu sagen, „ich haben will und foo Klasse zur gleichen Zeit nicht“ offensichtlich nicht sinnvoll, die. Es ist eine Reihenfolge der Hinzufügung/Entfernung von Klassen, die zu unterschiedlichen Ergebnissen führt - das ist nicht deterministisch.

Ich denke, Sie müssen Ihren Code ändern, um etw zu tun: [ng-class]="{'active has-error': isOn, 'disabled has-success': isDisabled, 'has-feedback': isOn || isDisabled}".

1.1:

Weiter unten in der Github Diskussion

[ng-class]="{'active has-error has-feedback': isOn, 'disabled has-success has-feedback': isDisabled}" kann nach unten gebrochen werden, wenn Ison den Wert true, hinzufügen Klassen aktiv, hat Fehler und hat-Feedback.

1.2: Wenn isOn zu false ausgewertet wird, entfernen Sie die Klassen active, has-error und has-feedback.

2.1: Wenn isDisabled zu true ausgewertet wird, fügen Sie Klassen deaktiviert, has-success und has-feedback hinzu.

2.2: Wenn isDisabled zu false ausgewertet wird, entfernen Sie die Klassen disabled, has-success und has-feedback.

Es gibt keine Möglichkeit zu verfolgen, wie die Klassen zur Klassenliste des Elements hinzugefügt wurden oder wer sie hinzugefügt hat, und es ist nicht der Zweck der ng-Klasse, dies zu tun. Es wendet nur die Regeln an, die es kennt.

Answer 2

Warum möchten Sie eine Klasse zweimal dynamisch anwenden/entfernen? Wenn die Klasse c1 immer benötigt wird, fügen Sie sie zum class="c1" Attribut hinzu und verwenden Sie [ngClass] für jedes bedingte Zeug. Ist kein Fehler, es die Bausteine ​​HTML und CSS.