Angular 单击后添加活动 class 并从兄弟姐妹中删除

Question

使用列表组件如何添加活动 class 并将其从兄弟姐妹中删除。

在主成分中HTML:

<app-item-desc *ngFor="let itemDesc of addedItem; let i = index" [itemlistDesc]="itemDesc"></app-item-desc>

列表的组成部分

<div class="order" (click)="select($event)">
    <div class="order__left">
        <h4 class="order__title">{{itemlistDesc.name}}</h4>
        <p><span class="order__unit">{{itemlistDesc.unit}}</span> Units at ${{itemlistDesc.price}}/Units</p>
    </div>
    <div class="order__right">
        <div class="order__total">
            {{(itemlistDesc.price * itemlistDesc.unit)}}$
        </div>
    </div>    
</div>

有没有可能使用指令的方法？ (Angular 2+)

Answer 1

如果你在组件中传递一些参数，你可以使用 ngClass 并有条件地放置和删除类，检查这个，

ngClass documentation

Answer 2

在你的问题中，问题是你的数组在 parent 组件中，你想要在 child 组件中激活 class。要从其他数组元素中删除 active class，您必须将事件传递给 parent 组件，以使另一个组件的 active class 为 false。

在child

import { Output, EventEmitter } from '@angular/core';
@Output() itemSelectEvent= new EventEmitter<string>();

select(array_item){
itemSelectEvent.emit(array_item.id);
}

在Parent需要处理那个事件

<app-item-desc *ngFor="let itemDesc of addedItem; let i = index" [itemlistDesc]="itemDesc" (itemSelectEvent)="selectEventHandler($event)"></app-item-desc>

selectEventHandler(event){
 // event, you will get selected id here
 for(let i=0;i < addedItem.length;i++){
   if(addedItem[i].id == event){
    addedItem[i]['is_active'] = true;
   }else{
    addedItem[i]['is_active'] = false;
   }
 }
}

在 child 中，您现在可以使用 is_active 添加指令

<div class="order" (click)="select($event)" [ngClass]="{'active': itemlistDesc.is_active}">

</div>

Angular 单击后添加活动 class 并从兄弟姐妹中删除

Angular after click add active class and remove from siblings

angular

angularjs

angularjs-directive

在child

在Parent需要处理那个事件

在 child 中，您现在可以使用 is_active 添加指令