单击Angular后添加活动类并从同级中删除

Question

使用component for list如何添加活动类和从同级中删除它。

在主要组件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>

有没有可能使用指令的方法？(角度2+(

Answer 1

在您的问题中，问题是您的数组在父组件中，而您希望活动类在子组件中。若要从其他数组元素中移除活动类，必须将事件传递给父组件，以使另一个数组元素中的活动类为false。

在孩子身上

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

In Parent Needs to handle that event

<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;
}
}
}

现在可以在子级中使用is_active add指令

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

Answer 2

如果您在组件中传递一些参数，则可以使用ngClass并有条件地放入和移除类，请检查此项，

ngClass文档