如何突出顯示div或使div被激活點擊

Question

我有幾個div，如果div被點擊，我想通過改變div的背景顏色以及div中的文本來高亮div即使其活躍）。在使用JQuery之前，我通過在css中定義一個類並動態刪除和添加類來完成此操作。這怎麼能在Angular2中完成。從研究和我不應該操縱DOM，因爲這是在angular2中不是沒有。我在網上查了幾個例子，但沒有成功。請

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; 
}