同じ要素のインスタンスが複数あるうちに、他のクラスの要素からクラス名を追加または削除する方法

Question

要素からCSSクラス名を追加または削除する際に問題があります。 それは、クラスを追加していないようですが、他のクラスが上書きされている可能性があります。

<div class="my-div class-a"></div> 

この部門にclass-bを追加します。

thisDivElement.className = 'class-b'; 

これはmy-div class-aを削除し、代わりにclass-bを貼り付けます。

<div class="class-b"></div> 

angle2では、他のクラスのオーバーヘッドのないクラスを追加/削除する方法を教えてください。それを行う正しい方法のためのアドバイスをしてください。

Answer 1

は角ドキュメントから撮影：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> 

あなたがコードに設定された変数で真/偽の値を置き換えることにより、アクティブであるかのクラス変更することができます。

HTML：

<some-element [ngClass]="{'first': firstClassActive, 'second': secondClassActive, 'third': thirdClassActive}">...</some-element> 

活字体：ここ

export class AppComponent { 
    firstClassActive: boolean = true; 
    secondClassActive: boolean = false; 
    thirdClassActive: boolean = false; 
} 

より詳細な例：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

私はまた、あなたがあなたへのより直接的なアクセスを提供します。この使用してjQueryのを、行うことができることを指摘しなければなりませんDOMの要素 - しかし、私の意見では角のテンプレートバインディングを貼っておく方が良い。