-1

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

当您单击类别子元素时，我一直在尝试将这个文本变为绿色，但收效甚微。

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

4

2 回答 2

2

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

像这样的东西。

活生生的例子

在组件.ts

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

在模板中：

<categories (selected)="onSelect(category)"
      [class.category-selected]="selectedCategory===category"
 *ngFor = "let category of categories" [category]="category"></categories>
于 2020-09-24T18:35:25.397 回答
-1

解决方案

所以，经过一番测试，我终于想出了解决这个问题的方法。

在包含您的父组件中，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

于 2020-09-28T06:46:02.290 回答