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

我有一个包含多个子组件的组件。大概是这样的：

<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”，以便我可以高亮显示多个）。但我不确定如何取消高亮显示任何其他高亮显示的子组件

我唯一能想到的就是让所有的child-component-x在高亮显示时发出一个事件。在我的mainComponent中，我可以迭代所有子组件，并将每个子组件设置为unhighlight。这将涉及每次迭代我的所有组件，可能会有很多

---

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

这应该可以满足您的要求：

<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=[]；
石林（项目）{
返回此.highlightedItems.indexOf（item）>=0；
}
切换突出显示（$event，item）{
设idx=this.highlightedItems.indexOf（项）；
让isControl=e.keyCode！=17；
if（isControl）{
if（idx<0）{
此.highlightedItems.push（项目）；
}否则{
this.highlightedItems=this.highlightedItems.slice（idx，1）；
}
}否则{
this.highlightedItems.length=0；
if（idx<0）{
此.highlightedItems.push（项目）；
}
} 
}

这应该满足您的要求：

<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=[]；
石林（项目）{
返回此.highlightedItems.indexOf（item）>=0；
}
切换突出显示（$event，item）{
设idx=this.highlightedItems.indexOf（项）；
让isControl=e.keyCode！=17；
if（isControl）{
if（idx<0）{
此.highlightedItems.push（项目）；
}否则{
this.highlightedItems=this.highlightedItems.slice（idx，1）；
}
}否则{
this.highlightedItems.length=0；
if（idx<0）{
此.highlightedItems.push（项目）；
}
} 
}

在纯javascript中，这太容易了，如果您知道如何更改javascript中的类，您还知道如何将同一函数中的其他对象的类更改为非高亮类，因此我不确定您是否要求仅使用css解决方案。您能详细说明一下吗？如果我将mousedown处理程序添加到任何子组件，那么当它触发时，该子组件不知道任何其他组件，并且不能告诉它们取消高亮显示。我可以将它冒泡到父组件，但它必须检查每个子组件，其中可能有很多子组件。如果给组件一个ID，当您使用MouseDown函数时，可以引用该ID。首先将所有组件设置为非高亮显示类，然后在高亮显示类中设置具有mousedown事件的当前组件。All-in-1 MouseDown函数。在纯javascript中，这太容易问了，如果你知道如何更改javascript中的类，你也知道如何将同一函数中的其他对象的类更改为未高亮的类，所以我不确定你是否要求一个仅css的解决方案。你能详细说明一下吗？如果我将mousedown处理程序添加到任何子组件，那么当它触发时，该子组件不知道任何其他组件，并且不能告诉它们取消高亮显示。我可以将它冒泡到父组件，但它必须检查每个子组件，其中可能有很多子组件。如果给组件一个ID，当您使用MouseDown函数时，可以引用该ID。首先将所有组件设置为非高亮显示类，然后在高亮显示类中设置具有mousedown事件的当前组件。多合一鼠标向下功能。