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

编程问答 2022-06-12

问题描述

所以我有一个父组件，其子组件绑定在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>

我一直试图获得很少成功的是，当您单击类别子元素时，将文本变为绿色。

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

解决方法

这可以通过从类别中发出事件并从父级那里监听来完成。

类似这样的东西。

Live example

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

因此，每当您单击以下任一类别时，选择变量将得到更新，例如：

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

然后，在子组件中，使用以下命令获取此父变量： @Input() selectedCategory:string;，然后使用触发器，该触发器将在父变量发生更改时进行检测：

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

最后检查新选择的变量是否与组件中的变量相同。我创建了一个选定的变量，如果该组件是选中的组件，则为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

angularng-class