webentwicklung-frage-antwort-db.com.de

Unterschied zwischen der Bindung von [ngClass] und [class]

Was ist der Unterschied in Angular 2 zwischen den folgenden Ausschnitten:

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">
angularsingle-page-applicationangular2-directivesangular-ng-class
31
Ben Taliadoros

Dies ist eine spezielle Angular Bindungssyntax

<div [class.extra-sparkle]="isDelightful">

Dies ist Teil des Compilers Angular und Sie können keine benutzerdefinierte Bindungsvariante erstellen, die diesem Bindungsstil folgt. Die einzigen unterstützten sind [class.xxx]="...", [style.xxx]="...", und [attr.xxx]="..."

ngClass ist eine normale Angular Direktive, wie Sie sie selbst erstellen können

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass ist mächtiger. Sie können damit eine Zeichenfolge von Klassen, ein Array von Zeichenfolgen oder ein Objekt wie in Ihrem Beispiel binden.

29
Günter Zöchbauer

Die obigen beiden Codezeilen beziehen sich auf CSS-Klassenbindung in Angular. Grundsätzlich gibt es 2-3 Möglichkeiten, wie Sie CSS-Klassen an angular -Komponenten binden können

Sie geben einen Klassennamen mit class.className in eckigen Klammern in Ihren Vorlagen an und dann einen Ausdruck rechts, der als wahr oder falsch ausgewertet werden soll, um zu bestimmen, ob die Klasse angewendet werden soll extra-sparkle (key) ist die CSS-Klasse und isDelightful (value).

<div [class.extra-sparkle]="isDelightful">

Wenn mehrere Klassen hinzugefügt werden sollen, ist die Direktive NgClass sehr praktisch. NgClass sollte ein Objekt mit Klassennamen als Schlüssel und Ausdrücke erhalten, die zu true oder false ausgewertet werden. Extra-sparkle ist der Schlüssel und isDelightful ist der Wert (boolean).

<div [ngClass]="{'extra-sparkle': isDelightful}">

Jetzt, zusammen mit extra Glanz, kannst du dein Div auch glitzern lassen.

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

oder

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;

     sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter()'>

Für ngClass können auch bedingte ternäre Operatoren angegeben werden.

10
Hameed Syed

Mit [ngClass] Sie können auf praktische Weise mehrere Klassen anwenden. Sie können sogar eine Funktion anwenden, die ein Objekt von Klassen zurückgibt. [class. ermöglicht es Ihnen, nur eine Klasse anzuwenden (Sie können die Klasse natürlich einige Male verwenden, aber sie sieht wirklich schlecht aus).

3
elzoy

In [ngClass] können Sie eine von zwei verschiedenen Klassen wie folgt hinzufügen:

<div [ngClass]="a === b ? 'class1' : 'class2'">
3
FierceDev