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

Question

所以我有一个父组件，其子组件绑定在ngFor()例如：

<categories *ngFor= "let category of categories" [category]="category"></categories>

每个类别都有一个带有ngClass的标题文本，就像这样（当我点击它时，我在子组件中选择了一个我设置为 true 的变量）：

        <h3 class="my-3 px-1 category" [ngClass]="{'category-selected':selected}">
            {{ category.Title }} 
        </h3>

我一直试图做的但收效甚微的是，当您单击类别子元素时，将此文本变为绿色。

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

Answer 1

这可以通过从类别发出一个事件并从父级监听它来完成。

像这样的东西。

活生生的例子

在 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>

Answer 2

解决方案

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

在包含ngFor的父组件中，您传递一个变量，该变量将保留有关正在选择哪个类别的信息：

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

因此，无论何时单击这些类别中的任何一个，选择变量都会更新，例如：

  selection(category){
      this.selectedCategory = category.Title; 
  }

然后，在子组件中，您使用以下@Input() selectedCategory:string;获取此父变量： @Input() selectedCategory:string; 然后你使用一个触发器来检测父变量何时发生变化：

  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