divをハイライト表示するか、クリックしたときにdivをアクティブにする方法

Question

私は複数のdivを持ち、divをクリックするとdivの背景色とdivのテキストを変更してdivを強調表示したいすなわちそれをアクティブにする）。私はこれをJQueryを使用する前に私のCSSでクラスを定義し、クラスを動的に削除して追加しました。これはどのようにAngular2で達成できますか？私はDOMを操作するべきではありません。これはangular2のnoです。私はいくつかの例をオンラインで見てきましたが、成功しませんでした。 Please

Answer 1

属性ディレクティブを作成する方法もあります。幸いにもあなたのためにAngularはあなたが探しているものをほぼ正確に行うがホバーイベントを行うためにa guideを持っています。 ... 'ユーザーのアクションに応答する' セクションのために、代わりにクリックに

を対応するために...これを置き換えます。これで

@HostListener('mouseenter') onMouseEnter() { 
    /* . . . */ 
} 
@HostListener('mouseleave') onMouseLeave() { 
    /* . . . */ 
} 

：

@HostListener('click') onMouseClick() { 
    /* . . . */ 
} 

を結果どこをacheiveするにはすでにハイライト表示されているdivをクリックすると、強調表示されません。

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 

@Directive({ 
    selector: '[myHighlight]' 
}) 
export class HighlightDirective { 
    private _defaultColor = 'red'; 
    private el: HTMLElement; 
    private highlighted: boolean = false; 

    constructor(el: ElementRef) { this.el = el.nativeElement; } 

    @Input('myHighlight') highlightColor: string; 

    @HostListener('click') onMouseClick() { 
    this.highlighted ? this.highlight('') : this.highlight(this.highlightColor || this._defaultColor); 
    } 

    private highlight(color: string) { 
    this.el.style.backgroundColor = color; 
    } 
} 

あなたはそのような要素に適用し、ディレクティブをSE：

<!-- With default color --> 
<div [myHighlight]>Click to highlight me!</div> 
<!-- With custom color --> 
<div [myHighlight]="yellow">I'm a div, la di da.</div> 

Answer 2

ジャスト値は現在の項目のいずれかに一致する場合はクリックしてクラスを設定し、どのような項目に応じてプロパティを設定します。スタイルを適用するには、CSSを使用してください。

@Component({ 
    styles: [` 
    div.highlight { 
     background-color: red; 
    }` 
    ], 
    template: ` 
    <div (click)="highlighted = 1" [class.highlight]="highlighted === 1">div1</div> 
    <div (click)="highlighted = 2" [class.highlight]="highlighted === 2">div2</div> 
    <div (click)="highlighted = 3" [class.highlight]="highlighted === 3">div3</div> 
` 
}) 
class MyComponent { 
    hightlighted:number = 0; 
}