角度2 [attr.class]上書きネイティブDOMクラス

Question

私は私のクラス名の文字列保持する変数があります：私は[attr.class]経由でネイティブのDOMエレメントにこのクラス名を追加したい

classNameB = "class-B"; 

を：

<div class="class-A" [attr.class]='classNameB'></div> 

次に、角度は現在のDOMクラスclass-Aを上書きします。どのような要素が作成した後に残っていることのようなものです：

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

何を私はここで間違ってやっていると、これに回避する方法？

PS：代わりに[ngClass]を使用できますか？

Answer 1

ブール基づいてクラスを持つことができます。ほとんどの時間は、私が[ngClass]を使用して、それがされるまで大丈夫だった：

私は ngClassの良い使用を見つけるまで、私が貼り付けた、

classNameHolder: string = 'class-name-1'; 
isSomeClass: boolean = true; 

<div class='native-class' [ngClass]='classNameHolder' [ngClass]='{"some-class": isSomeClass}'> 

：

<div class='native-class' ngClass='{{classNameHolder}} {{isSomeClass ? "some-class" : ""}}></div> 

をそして、それはですそれ。これは私が最後に使ったオプションです。もし誰かが同じ居場所に遭遇したら、助けてくれることを願っています。

Answer 2

[attr.class]='classNameB' 

ここで、classNameBは$ scope添付変数である必要があります。式または値にすることができます。 あなたもNG-クラスのこの

[attr.class]='{{getClassName()}}' 

のようなコードが、それはどちらも同じ働き属性を変更することができます。 か、だから私は、私はほとんどのオプションを使い果たしたいくつかの面白い状況を経て

[attr.class]="'ifThis'?'classNameB':'classNameA'" 

または

ng-class="varA==0 ?'classNameB':'classNameA'"