2016-09-05 6 views
2

要素のクラスにアクセスして、要素が「崩壊する」か「崩壊する」かどうかをチェックしたいと思います。私は次のようにしたい:Angular2要素のクラスを確認する

<span *ngIf=" class == 'collapse in' "> - </span> 
<span *ngIf=" class == 'collapse' "> + </span> 

Angular2の要素のクラスを取得する簡単な方法はありますか?

答えて

5

通常、角度2では、設定が逆になり、モデルが更新され、ビューにモデルが反映されます。これにより、DOMの状態を確認するためにDOMにアクセスする必要はありません。しかし、あなたはこれが何をすべき必要がある場合:

<span #span *ngIf="hasClass(span.className, 'collapse') && hasClass(span.className, 'in')"> - </span> 
<span #span *ngIf="hasClass(span.className, 'collapse')"> + </span> 
hasClass(classes, cls) { 
    return (' ' + classes + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

https://developer.mozilla.org/de/docs/Web/API/Element/className

または

<span #span *ngIf="span.classList.contains('collapse') && span.classList.contains('in')"> - </span> 
<span #span *ngIf="span.classList.contains('collapse')"> + </span> 
+0

をhasClass(クラス、CLS)関数にタイプミスはありますか? 'className'を 'classes'にする必要がありますか? –

+0

私はそれが 'className'でうまくいくと思います。 'classList.contains()'を使うこともできます。 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。これは、コンポーネント内でメソッドなしでインラインで使用するには十分に短いですが、これがまだサポートされていない場合があります(例えば、AFAIRなどのIEとSVG要素) –

+0

私はそれが returnクラス** + '').indexOf( '' + cls + '')> -1; これはこのように機能しました。 –

関連する問題