角2は短時間のCSSクラスの追加/変更

Question

私の角2アプリでは、ユーザーの現在のポイントを示すラベルがあります。

点数が変更された場合、短時間ラベルのクラスを変更したいと思っています。何か変更があったことをユーザーに知らせるためのアニメーションを作成するためです。

場合、私は短い時間のために、ラベルのクラスを変更するにはどうすればよい

if (this.userData.points != data.user.points) 

を：私が観察を使用してユーザーのポイントを取得し、ポイント数が使用して変更された場合、私は確認することができます私のサービスで

<label class="label label-primary"> 
    {{userService.user.points}} 
    </label> 

ポイントの数は変更されましたか？

<label class="label label-primary" [class.label-animate]="pointsChanged"> 
{{userService.user.points}} 
</label> 

そして、あなたの観測可能に：

Answer 1

あなたはこのような何か行うことができます

if (this.userData.points != data.user.points) { 
    this.pointsChanged = true; 
    window.setTimeout(() => this.pointsChanged = false, 200) // the time you want 
} 

をだから、基本的には、ポイントが変化するたびに、単にクラスを切り替えフラグを保持します。

他にも解決策がありますが、私はこの単純な理由からこの方法をお勧めします。