Question

我试图弄清楚如何突出鼠标点击div，只有一个项目应该突出显示。如果我这样做（onmouseup）（它不识别onmouseclick或onmouseClick），所有项目都会被突出显示。以下是指令代码。的 Here is the Plnkr Code

import {Directive, ElementRef}  from "@angular/core";

@Directive({
  selector:'[highlight]',
  host: {
    '(mouseup)': 'onMouseUp()',
  }

//  host: {
//    '(mouseenter)': 'onMouseEnter()',
//    '(mouseleave)': 'onMouseLeave()',
//  }
})
export class Highlight{
  private el:ElementRef;
  constructor(el:ElementRef){
    this.el = el;
  }


  onMouseEnter(){
    console.log(this.el);
    this.el.nativeElement.style.backgroundColor = 'white';
    this.el.nativeElement.style.backgroundColor = '#D1D301';
  }
  onMouseLeave(){
    this.el.nativeElement.style.backgroundColor = 'black';
    this.el.nativeElement.style.backgroundColor = 'white';
  }

  onMouseUp(){
    console.log(this.el);
    this.el.nativeElement.style.backgroundColor = 'white';
    this.el.nativeElement.style.backgroundColor = '#D1D301';
  }
}

Answer 1

您可以使用@ViewChildren指令引用元素列表，并根据此选择取消选择当前的select元素。必须提供此列表作为每个元素的输入。

以下是一个示例：

@Directive({
  selector:'[highlight]',
  host: {
    '(click)': 'select()',
  }
})
export class Highlight{
  private el:ElementRef;

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

  @Input()
  elements;

  select(){
    this.elements.forEach(elt => {
      elt.unselect();
    });

    this.el.nativeElement.style.backgroundColor = 'white';
    this.el.nativeElement.style.backgroundColor = '#D1D301';
  }

  unselect() {
    this.el.nativeElement.style.backgroundColor = 'black';
    this.el.nativeElement.style.backgroundColor = 'white';
  }
}

使用此指令的方式：

@Component({
  selector: 'itemdisplay',
  directives:[Highlight]
  template: `
    <div *ngFor="let item of items">
      <div style="display:inline-block; height:80px; width: 70px; border:1px solid black;" highlight [elements]="elements">
        {{item.name}}
      </div>
    </div>
  `
})
export class ItemDisplay{
  @ViewChildren(Highlight)
  elements:Highlight[];

  public items = [
    {id:1, name:"Item1"}
    {id:2, name:"Item2"}
    {id:3, name:"Item3"}
    {id:4, name:"Item4"}
    {id:5, name:"Item5"}    
  ];
}

这是一个有效的傻瓜：https://plnkr.co/edit/LnOMPv?p=preview。

Angular highlight指令用于突出显示div上的div

1 个答案: