如何在单击某个元素时高亮显示该元素，但同时取消高亮显示其他元素？

Question

我有一个包含多个子组件的组件。如下所示：

<div class="mainComponent">
    <child-component-1 *ngFor="let childA of childrenA"></child-component-1>
    <child-component-2 *ngFor="let childb of childrenB"> </child-component-2>
    <child-component-3 *ngFor="let childc of childrenC"></child-component-3>
</div>

如果用户单击子组件1，我希望对其应用一些特殊的样式，使其突出显示。很简单，只需添加(mousedown)="foo()“(并检查用户是否按住了'ctrl‘，这样我就可以突出显示多个)。但是我不确定该怎么做，那就是取消高亮显示任何其他高亮显示的子组件。

我唯一能想到的就是让所有的子组件x在它们被高亮显示时发出一个事件。在我的mainComponent中，我可以遍历所有子组件，并将每个组件设置为取消高亮显示。这将涉及到每次迭代我所有的组件，而且可能会有很多。

有没有更好的方法来处理这个问题，或者我的想法是正确的吗？

Answer 1

这应该是您想要的结果：

<div class="mainComponent">
  <child-component-1 
    *ngFor="let childA of childrenA"
    [class.highlight]="isHighlighted(childA)"
    (click)="toggleHighlight($event, childA)">
  </child-component-1>
  <child-component-2 
    *ngFor="let childb of childrenB"> </child-component-2
    [class.highlight]="isHighlighted(childB)"
    (click)="toggleHighlight($event, childB)">
  </child-component2>
  <child-component-3 
    *ngFor="let childc of childrenC"
    [class.highlight]="isHighlighted(childC)"
    (click)="toggleHighlight($event, childA)">
  </child-component-3>
</div>

highlightedItems = [];

isHighlighted(item) {
  return this.highlightedItems.indexOf(item) >= 0;
}

toggleHighlight($event, item) {
  let idx = this.highlightedItems.indexOf(item);
  let isControl = e.keyCode != 17;
  if(isControl) {
    if(idx < 0) {
      this.highlightedItems.push(item);  
    } else {
      this.highlightedItems = this.highlightedItems.slice(idx, 1);
    }
  } else {
    this.highlightedItems.length = 0;
    if(idx < 0) {
      this.highlightedItems.push(item);  
    }
  } 
}