Angular 角度高亮显示指令，用于在单击时高亮显示div

我试图弄清楚如何在鼠标点击时高亮显示div，使其只高亮显示一个项目。如果我这样做（onmouseup）（它不识别onmouseclick或onmouseclick），所有项目都将高亮显示。以下是指令代码

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

---

您可以使用

@ViewChildren

指令引用元素列表，并基于此取消选择当前选择元素。此列表必须作为每个元素的输入提供

以下是一个示例：

@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"}    
  ];
}

@组件({
选择器：“项目显示”，
指令：[突出显示]
模板：`
{{item.name}
`
})
导出类项目显示{
@查看儿童（突出显示）
元素：突出显示[]；
公共物品=[
{id:1，名称：“Item1”}
{id:2，名称：“Item2”}
{id:3，名称：“Item3”}
{id:4，名称：“Item4”}
{id:5，名称：“Item5”}
];
}

---

这是一个有效的提示：。

当用户单击一个正方形时，您希望所有其他方块都恢复为白色，是吗？这将很难按照您的结构方式进行。您的指令需要遍历DOM并对DOM结构进行假设（不好）。与整个列表中的一个指令不同，更好的设计可能是将该指令添加到每个项目中，并使其在单击鼠标时发出事件（使用输出属性）。然后父组件将遍历其列表，并调用指令上的公共方法取消高亮显示每个项。然后它将调用指令上的公共方法来突出显示该方法。类似于选项卡实现。查看ng类请更改plnkr，看看是否可以使其工作。谢谢，我将事件更改为单击“您仍然可以使用鼠标”，并将您的样式更改为

HostBinding

。这就是你要找的吗？谢谢。我不知道ViewChildren是如何工作的，但这正是我想要的。我将研究ViewChildren文档。有什么方法可以改进您的解决方案吗。理想情况下，我只想指定“highlight”作为我的属性，就这样。使用带有highlight属性的[elements]=“elements”是一种额外的功能。。只是一个想法。