Detaillierte Erläuterung verschiedener Möglichkeiten zum Hinzufügen von CSS-Klassen zu HTML-Elementen in Angular

Dieser Artikel stellt Ihnen verschiedene Möglichkeiten vor, CSS-Klassen zu HTML-Elementen in Angular hinzuzufügen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Untersuchen Sie hauptsächlich verschiedene Implementierungen des dynamischen Hinzufügens von Klassen zu HTML-Elementen in Angular, einschließlich der Verwendung von className-Direktiven, der Verwendung von NgClass usw. ​ 【Verwandte Empfehlung: „angular Tutorial“】

Natives JavaScript fügt dem Element eine Klasse hinzu

Der Hauptcode lautet:

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

Eine genauere Erklärung liegt in der Verwendung von className, was nicht der Fall ist hier beschrieben werden.

Verwenden Sie die Attributbindung [className], um CSS-Klassen in Angular hinzuzufügen.

Sie können einfach className verwenden, um Klassen an unsere HTML-Elemente zu binden: className 为我们的 HTML element 绑定类：

<div [className]="&#39;example-class&#39;">

</div>

当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：

<div [className]="condition ? &#39;condition-true-example-class&#39;: &#39;false-example-class&#39;">

</div>

在 condition 为 true 的时候，会添加 condition-true-example-class 类，为 false 的时候会添加 false-example-class 类。

同样，我们还可以写入其他的简单的判别：

<div [className]="&#39;example-class&#39; + variableValue">

</div>

基于条件切换 css 的类

当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：

<div [className]="condition ? &#39;condition-true-example&#39;:&#39;&#39;">

</div>

既不美观也不太好理解。

我们可以使用：

<div [class.example-class]="condition">

</div>

来实现上述的需求。

更好的使用 ngClass 指令

上述的所有添加类的方式，都可以使用 ngClass 来替代。

该指令只是语法糖，可以是代码看起来更加简洁明了。

像我们使用 ngClass 指令来完成上面的两个示例：

<!-- 替代 className 属性绑定 -->
<div [ngClass]="{
    &#39;condition-true-example-class&#39;: condition,
    &#39;false-example-class&#39;: !condition
}">
  
</div>

<!-- 替代基于条件切换 class -->
<div [ngClass]="{&#39;example-class&#39;: condition}">
  
</div>

除了上述的方式， ngClass 还有一些其他的常用方式：

<!-- 添加单个类 -->
<div [ngClass]="&#39;example-class&#39;">
  
</div>

<!-- 添加多个类 -->
<div [ngClass]="[&#39;example-class&#39;,&#39;example-class-2&#39;]">
  
</div>

更多使用方式请查看： 官方文档

需要注意的是：

如果在组件的 ts 文件中使用 HostBinding 添加了多个类：

export class AppExampleComponent implements OnInit {
  @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
  // ...
}

那么在使用的时候，则不能在通过 class 、className 、ngClassrrreee

rrreeeWenn condition true ist, wird condition-true hinzugefügt -example -class-Klasse, wenn sie false ist, wird die Klasse false-example-class hinzugefügt.

🎜CSS-Klassen basierend auf Bedingungen wechseln🎜🎜🎜Beim Wechseln von CSS-Klassen basierend auf bestimmten Bedingungen ist die obige Methode eine etwas umständlich: 🎜rrreee🎜 ist weder schön noch leicht zu verstehen. 🎜🎜Wir können Folgendes verwenden: 🎜rrreee🎜, um die oben genannten Anforderungen zu erreichen. 🎜

🎜Verwenden Sie besser die ngClass-Direktive🎜🎜🎜Alle oben genannten Methoden zum Hinzufügen von Klassen können durch ngClass ersetzt werden. 🎜🎜Diese Anweisung ist lediglich Syntaxzucker, wodurch der Code prägnanter und klarer aussehen kann. 🎜🎜So wie wir die ngClass-Direktive verwenden, um die beiden oben genannten Beispiele zu vervollständigen: 🎜rrreee🎜Zusätzlich zu den oben genannten Methoden verfügt ngClass auch über einige andere häufig verwendete Methoden: 🎜rrreee 🎜Mehr Weitere Verwendungsmethoden finden Sie unter: Offizielle Dokumentation 🎜🎜🎜🎜Das sollte es sein Beachten Sie Folgendes: 🎜 🎜🎜Wenn Sie HostBinding in der ts-Datei der Komponente verwenden, um mehrere Klassen hinzuzufügen: 🎜rrreee🎜 Dann können Sie class bei der Verwendung nicht übergeben code>, <code>className, ngClass, fügen Sie eine Klasse hinzu. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung verschiedener Möglichkeiten zum Hinzufügen von CSS-Klassen zu HTML-Elementen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!