Angular で HTML 要素に CSS クラスを追加するいくつかの方法の詳細な説明

この記事では、angular で HTML 要素に CSS クラスを追加するいくつかの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

主に、className ディレクティブの使用、NgClass の使用など、Angular で HTML 要素にクラスを動的に追加するいくつかの実装を検討します。 ​ [関連する推奨事項: "angular チュートリアル "]

ネイティブ JavaScript は要素にクラスを追加します

メイン コードは次のとおりです:

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

element.className = 'additional-class'

より具体的な説明は className の使用法にあるため、ここでは詳しく説明しません。

[className] 属性バインディングを使用して Angular に CSS クラスを追加します

className を使用するだけで、クラスを HTML 要素にバインドできます。

<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 クラス

特定の条件に基づいて切り替えるとき When it CSS クラスの場合、上記のメソッドは少し面倒です:

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

</div>

は美しくも理解するのも簡単ではありません。

上記の要件を達成するには、

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

</div>

を使用できます。

ngClass ディレクティブのより良い使用方法

クラスを追加する上記のメソッドはすべて、ngClass に置き換えることができます。

この命令は単なる構文の砂糖であり、コードをより簡潔かつ明確に見せることができます。

同様に、ngClass ディレクティブを使用して上記 2 つの例を完成させます。

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

その他の使用方法については、公式ドキュメント

注意してください:

##コンポーネント内の #If

ts ファイルは HostBinding を使用して複数のクラスを追加します:

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

それを使用するとき、

class を渡すことはできません。 className、ngClass、クラスを追加します。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がAngular で HTML 要素に CSS クラスを追加するいくつかの方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。