Angular 角度：如何在子组件之间切换选择

因此，我得到了一个父组件，其子组件绑定在NGF上，例如：

我一直试图做的是在单击category children元素时将此文本变为绿色，但收效甚微

---

这很好，但我的主要问题是，每当我点击第一个类别之后的第二个类别，第一个仍然将文本设置为绿色，我不知道当您单击其他类别时如何将文本设置回其原始颜色，即如果未选择类别，则重置其颜色。

这可以通过从类别中删除事件并从父级收听来完成

像这样的

in component.ts

selectedCategory
onSelect(category){
this.selectedCategory=category
}

在模板中：

<categories (selected)="onSelect(category)"
      [class.category-selected]="selectedCategory===category"
 *ngFor = "let category of categories" [category]="category"></categories>

解决方案 所以，经过一些测试，我终于找到了解决这个问题的方法

在包含ngFor的父组件中，传递一个变量，该变量将保留所选类别的信息：

<categories (click)="selection(category)"   *ngFor= "let category of categories"  [category]="category"  [selectedCategory]="selectedCategory"></categories>

然后，在子组件中，使用以下方法获得此父变量： @输入selectedCategory：字符串；然后使用触发器，该触发器将在父变量发生更改时进行检测：

  ngOnChanges(changes: SimpleChanges) {    
    this.setClass(changes.selectedCategory.currentValue);    
}

最后检查新选择的变量是否与组件中的变量相同。我创建了一个变量selected，如果该组件是选中的组件，则该变量为true；如果该组件是未选中的组件，则该变量为false。这将允许我将组件的类重置回其原始类

setClass(value){
  if(value===this.category.Title){
    this.selected = true;
  }else{
    this.selected = false;
  }
}

最后，我将所需组件设置为一个ngClass，该类依赖于所选变量

<h4 [ngClass]="{'category-selected': selected, 'category-unselected': !selected }">Text</h4>

---

如果遇到同样的问题，希望您能正确理解所有内容。如果你有任何问题，不要犹豫D

每个类别都应该有自己选择的属性..不起作用。第一个选择不起作用，我必须通过单击事件来更改它。Secod因为它是父组件，所以零件selectedCategory==Category永远不会满足要求，因为父组件具有所有单独的子组件。第三，我试图在children categories组件中设置/取消设置h4的标题颜色，因此该类必须在其各个组件中更改。不管怎样，谢谢你的帮助我将上传一个stackblitz的例子来说明如何做到这一点。我稍后再做。好的。这是一个活生生的例子嗨！对于另一种情况，您的答案是正确的。不幸的是，您没有完全理解子/父组件，因为我没有正确地解释它。对此我深表歉意。我将用最终对我有用的答案更新这个问题。无论如何谢谢你：D！

  ngOnChanges(changes: SimpleChanges) {    
    this.setClass(changes.selectedCategory.currentValue);    
}

setClass(value){
  if(value===this.category.Title){
    this.selected = true;
  }else{
    this.selected = false;
  }
}

<h4 [ngClass]="{'category-selected': selected, 'category-unselected': !selected }">Text</h4>