Explication détaillée de plusieurs façons d'ajouter des classes CSS aux éléments HTML en angulaire

Cet article vous présentera plusieurs façons d'ajouter des classes CSS aux éléments HTML dans angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explorez principalement plusieurs implémentations d'ajout dynamique de classes aux éléments HTML dans Angular, y compris l'utilisation de la directive className, l'utilisation de NgClass, etc. ​ [Recommandations associées : "Tutoriel angulaire"]

JavaScript natif ajoute une classe à l'élément

Le code principal est :

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

element.className = 'additional-class'

Une explication plus spécifique réside dans l'utilisation de className, qui ne sera pas décrite ici.

Utilisez la liaison d'attribut [className] pour ajouter des classes CSS dans Angular

Vous pouvez simplement utiliser className pour lier la classe à notre élément HTML :

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

</div>

Bien sûr, cela n'a pas beaucoup de sens d'utiliser cet attribut pour lier des classes statiques. Nous pouvons lier des classes associées selon des conditions :

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

</div>

Quand condition vaut true, cela sera ajouté. condition-true-example-class classe, quand ce sera false, la classe false-example-class sera ajoutée.

De même, nous pouvons également écrire d'autres jugements simples :

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

</div>

Classe CSS qui change en fonction de conditions

Lors de la commutation en fonction de certaines conditions Quand il En ce qui concerne les classes CSS, la méthode ci-dessus est un peu lourde :

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

</div>

n'est ni belle ni facile à comprendre.

Nous pouvons utiliser :

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

</div>

pour atteindre les exigences ci-dessus.

Meilleure utilisation de la directive ngClass

Toutes les méthodes ci-dessus d'ajout de classes peuvent être remplacées par ngClass.

Cette instruction n'est qu'un sucre de syntaxe, ce qui peut rendre le code plus concis et plus clair.

Comme nous utilisons la commande ngClass pour compléter les deux exemples ci-dessus :

<!-- 替代 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>

En plus des méthodes ci-dessus, ngClass a également d'autres méthodes couramment utilisées :

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

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

Pour plus de méthodes d'utilisation, veuillez consulter : Documents officiels

Il convient de noter que :

Si utilisé dans le ts fichier du composantHostBinding Ajout de plusieurs classes :

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

Ensuite lors de l'utilisation, vous ne pouvez pas ajouter de classes via class, className, ngClass.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!