Question

我有几个div并且如果单击div，我想通过改变div的背景颜色以及div中的文本（即使其激活）来高亮显示div。我在使用JQuery之前通过在我的css中定义一个类并动态删除和添加类来完成此操作。如何在Angular2中完成。从研究开始，我不应该操纵DOM，因为这在角度2中是不可能的。我在网上看了几个例子但没有成功。请

Answer 1

一种方法是制作属性指令。对你来说幸运的是，Angular有a guide几乎完全正在寻找的东西，但有悬停事件。为了响应点击次数，对于“响应用户操作”＃39;节...

...替换这个：

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

用这个：

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

要获得一个结果，单击已突出显示的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;
  }
}

要使用该指令，请将其应用于如下所示的元素：

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

单击时如何突出显示div或使div处于活动状态

2 个答案: