イベントのターゲットを角度2でスタイルするにはどうすればよいですか？

Question

私はthis blog (section 3, event binding)で提案されているように偶数リスナーを追加しました。コンポーネントを定義する私のクラスでは、マウスの入力と終了でヒットします。

<p class="title" (mouseenter)="unfold($event)" (mouseleave)="fold($event)">...</p> 

また、私はそれが期待している要素であり、次のjQueryスクリプトを使って子要素にアクセスできることをコンソールで確認しました。

$(event.target) 
    .children("p.title") 
    .css("display", "block"); 

ただし、折り返し機能に入れてもうまくいきません。リスナーに接続しています。私はAngular（特にAngular2）で新しくなっているので、私は間違っていると思っているので、jQueryはまったく使われていないはずです。私のコンポーネントのクラスを設定するために何を使うべきですか？

unfold(event) { 
    console.log("unfold"); 
    event.target 
    .findTheTitleSomehow() 
    .andAddCssToIt(); 
} 

Answer 1

クラス名をAngular2で動的に切り替える場合は、属性の双方向バインディングを使用できます。単に "class"属性をコンポーネントクラスの変数にバインドします。

例：

<p [class]="foldClass" (mouseenter)="unfold($event)" (mouseleave)="fold($event)">...</p> 

あなたcomponent.tsで

flodClass:string = ''; 
flod(e) { 
    this.foldClass = 'example-flod-class'; 
} 
unflod(e) { 
    this.foldClass = 'example-unflod-class'; 
}