2017-06-28 6 views
0

Webアプリケーションのワークフロー要素で作業していますが、背景色を更新して完了を示す問題が発生しています。ワークフローバーは、右側に横向きの三角形がある四角形です。三角形はCSSによって構築された擬似要素、のようなものです:角2 - CSSエレメントの後ろを動的に変更する

.navwizard > li > a:after { 
    .... 
    background-color:#eeeeee, 
    .... 
} 

我々が成功を示すために、ステータス変更後の背景色を更新したいが、私はの範囲でこれを行う方法がわからないんだけどAngular 2.これを行う方法はありますか?

+0

完了ステータスに応じて、別のクラスと[そのクラスを切り替える](https://angular.io/api/common/NgClass)を定義できます。 – ConnorsFan

答えて

2

あなたはngClassディレクティブでこのクラスを適用する可能性が完了

.navwizard.success > li > a:after { 
    background-color: green; 
} 

後に.navwizard要素に成功クラスを適用することができますが、角に成功し、この要素にクラスを追加することができます

1

https://angular.io/api/common/NgClassこのようなCSSブロックを作成します。

.navwizard > li > a.success:after { background-color: #000; }

Javascriptを "のみ" の要素を操作するためであることに留意します。可能であれば、CSSを使用してカスタマイズする必要があります。

関連する問題