JavaScript für Anfänger: Dynamische Klassen mit ngClass zuweisen

In Web-Apps ist es ein häufiges Erfordernis, das Erscheinungsbild eines Elements basierend auf einer Bedingung anzupassen. Es gibt verschiedene Möglichkeiten, dies zu erreichen, aber wenn Sie mit Angular arbeiten, ist Ihre Wahl klar. Die ngClass-Direktive bietet eine Vielzahl von Möglichkeiten, Klassennamen dynamisch an Elemente oder Komponenten zuzuweisen. Ihre Syntax ist sowohl prägnant als auch unterstützt ziemlich komplexe Logik, um uns eine fein abgestufte Kontrolle über sowohl unsere Klassennamen als auch die Kriterien für deren Festlegung zu geben. In diesem Tutorial werden wir einige der häufigsten Möglichkeiten durchgehen, eine CSS-Klasse dynamisch einem Element mithilfe der ngClass-Direktive zuzuweisen.

Zuweisen einer CSS-Klasse über die [className]-Eigenschaftsbindung

Obwohl dieser Artikel sich mit der ngClass-Direktive befasst, ist es erwähnenswert, dass Sie sie in vielen Fällen gar nicht benötigen werden! Dank der [className]-Eigenschaftsbindung können wir eine Klasse über die native JavaScript className-Eigenschaft mit der []-Bindesyntax setzen. Wir können beliebige Anweisungen innerhalb dieser Bindung ausführen, die in einem String resultieren. Dies ermöglicht es uns, eine oder mehrere Klassen basierend auf einer Bedingung festzulegen:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

Wir könnten auch den Klassennamen zur Laufzeit erstellen:

<div [className]="'class' + someValue"></div>

Lesen: 5 JavaScript-Konzepte, die jeder Webentwickler lernen sollte

Klassenumschaltung über die [className]-Eigenschaftsbindung

Einige halten die oben genannte Klassentoggling-Technik für etwas komplizierter, als sie sein müsste, da die inactive-class wahrscheinlich die Standardeinstellung wäre. Wenn Sie dieser Meinung sind, können Sie die Syntax [class.class-name] verwenden, um eine Bedingung anzugeben, die ausgewertet werden soll:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Also, wenn wir eine Klasse bedingt mit der Eigenschaftsbindung [className] setzen können, warum brauchen wir dann überhaupt die ngClass-Direktive? Wie wir sehen werden, ist der eigentliche Grund für die Verwendung der ngClass-Direktive, dass sie uns dabei helfen kann, zwischen mehreren Klassen zu wählen.

Eintauchen in die ngClass-Direktive

Bevor wir uns damit beschäftigen, wie man die ngClass-Direktive verwendet, wäre es lehrreich, sich deren Definition anzusehen:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Beim Betrachten des obigen Codes sehen wir nun, dass die [class]-Syntax, die zuvor verwendet wurde, tatsächlich Teil der ngClass-Direktive ist, über @Input('class'). Beachten Sie auch, dass uns die ngClass-Direktive ganze vier Optionen zur Verfügung stellt, um dynamische Klassen festzulegen!

Lassen Sie uns jede davon genauer betrachten.

Bereitstellung eines Strings oder String[]

Das Zuweisen eines Strings oder einer String-Array an ngClass ermöglicht es uns, dynamische Klassen an Angular-Variablen zu binden. Angenommen, wir hätten eine Variable namens activeClass. In unserer .ts-Datei können wir diese auf einen bekannten Klassennamen wie "text-success" oder "text-failure" basierend auf dem Ergebnis einer Operation setzen:

<div 
  [ngClass]="activeClass">
</div>

Die Array-Syntax ist nützlich, um mehrere Klassen demselben Element oder Komponente zuzuweisen:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Verwendung eines ausgewerteten Ausdrucks

Eine etwas fortgeschrittenere – aber äußerst nützliche – Methode zur Verwendung von ngClass besteht darin, einen Ausdruck bereitzustellen. Die bereitgestellte Klasse wird nur angewendet, wenn eine Variable oder ein Ausdruck als true ausgewertet wird. Um einen Ausdruck anzugeben, müssen Sie ein Objekt mit geschweiften Klammern {} bereitstellen. Links von jedem Doppelpunkt – dem Eigenschaftsnamen – steht die Klasse, die angewendet wird; rechts davon – der Eigenschaftswert – steht der Ausdruck oder die Variable, die Sie auswerten möchten. Hier ist ein Beispiel:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Lesen: React, Angular und Vue.js: Was sind die technischen Unterschiede?

Verwendung des Ternary Operators

Der Ternary Operator ermöglicht es Ihnen, basierend auf einem booleschen Ausdruck – entweder einem booleschen Feld oder einer Aussage, die zu einem booleschen Ergebnis ausgewertet wird – einen Wert einer Variable zuzuweisen. Im Wesentlichen kann der Ternary Operator, auch bekannt als der Bedingungsoperator, als Alternative zur if/then/else-Anweisung beim Setzen einer Variablen verwendet werden. 

Die Verwendung des Ternary Operators mit ngClass ermöglicht es uns, zwei verschiedene Klassen anzugeben: eine, wenn ein Ausdruck wahr ist, und eine für falsch. Hier ist die grundlegende Syntax für den Ternary Operator:

[ngClass]="expression or variable ? true class : false class"

Hier ist ein Code, der den Ternary Operator verwendet, um die Klasse eines DIV je nachdem, ob zwei Variablen gleich sind oder nicht, festzulegen:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Die Set ngClass Signatur: Unerwünscht und ungeliebt

Set ist eine neue Datenstruktur, die in ES6 eingeführt wurde, ähnlich wie Map. Ein TypeScript-Set ermöglicht es uns, verschiedene Werte in einer Liste mithilfe von Methoden wie add(), has() und delete() zu speichern. Aus irgendeinem Grund konnte sich die Signatur Set<string> für ngClass nie wirklich durchsetzen. Ich habe es noch nie verwendet, und ich kenne niemanden, der es verwendet hat. 

Das Set sollte jedoch Strings enthalten, die Klassennamen darstellen, die auf das Element oder die Komponente angewendet werden sollen. Hier ist ein TypeScript-Code, der ein Set mit dem Namen Klassen erstellt:

// Klassenmitgliedsvariable deklarieren
public classes = new Set();
 
// Klassennamen hinzufügen
classes.add('active').add('text-large');

Schlussfolgerung

In diesem Tutorial haben wir einige der gängigsten Methoden durchgegangen, um mithilfe der ngClass-Direktive dynamisch eine CSS-Klasse einem Element zuzuweisen. Wie Sie sehen können, ist es ziemlich leistungsstark.