如何突出显示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; 
}