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