Javascript Angular2：如何在类似元素上切换类

我想能够切换颜色上的我点击。现在，当我点击其中一个时，它会将它们全部切换。我想单独切换每一个

HTML:

---

使用与所有图标不同的模板变量名

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" appToggle #btnone="appToggle" [ngClass]="btnone.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
    {{btnone.flagStatus}} 
    <i class="fal fa-bookmark" 
    appToggle #btntwo="appToggle" 
    [ngClass]="btntwo.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btntwo.flagStatus}}
    <i class="fal fa-alarm-clock" appToggle #btnthree="appToggle"  [ngClass]="btnthree.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btnthree.flagStatus}}

</div>

---

这里的示例：

我想说的第一件事是，您使用一个变量来控制所有元素的类，并且该变量会在单击其中任何一个元素时发生变化，所以是的。。这是行不通的，他们需要一个不同的范围

我不能说你的问题的最佳解决方案是什么，但这正是我目前印象深刻的

我创建了一个指令并添加了所有元素，然后通过指令本身控制类

<!-- buttons for simplicity -->
<button appToggleColor class="yellow">Button3</button>
<button appToggleColor class="yellow">Button2</button>
<button appToggleColor class="yellow">Button1</button>

constructor(private renderer: Renderer2) { }
private flag = true

@HostListener('click', ['$event']) onClick($event: Event) {
    this.flag = !this.flag;
    if (this.flag) {
       this.renderer.removeClass($event.target, 'green');
       this.renderer.addClass($event.target, 'yellow')    
    }
    else {
      this.renderer.removeClass($event.target, 'yellow');
       this.renderer.addClass($event.target, 'green');
    }
  }

按钮3
按钮2
按钮1
构造函数（私有呈现器：Renderer2）{}
私有标志=真
@HostListener（'click'，['$event']）onClick（$event:event）{
this.flag=！this.flag；
如果（此标志）{
removeClass（$event.target，'green'）；
this.renderer.addClass（$event.target，'yellow'）
}
否则{
removeClass（$event.target，'yellow'）；
addClass（$event.target，'green'）；
}
}

我正在使用

Rendere2

添加/删除类

一个简单的方法是：

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" (click)="flagActive('flag')" [ngClass]="items['flag'].flagStatus ? 'flagActive' : 'flagNotActive'">test1</i>

    <i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'">test2</i>

    <i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'">test3</i>

</div>

---

顺便说一句，你的演示似乎不是正确的，但我喜欢你的答案。

import {Directive,HostListener} from '@angular/core';

@Directive({
  selector: '[appToggle]',
  exportAs:'my-directive'
})
export class MyDirective {
flagStatus;
@HostListener('click', ['event']) flagActive() {
this.flagStatus=!this.flagStatus;
} 

<!-- buttons for simplicity -->
<button appToggleColor class="yellow">Button3</button>
<button appToggleColor class="yellow">Button2</button>
<button appToggleColor class="yellow">Button1</button>

constructor(private renderer: Renderer2) { }
private flag = true

@HostListener('click', ['$event']) onClick($event: Event) {
    this.flag = !this.flag;
    if (this.flag) {
       this.renderer.removeClass($event.target, 'green');
       this.renderer.addClass($event.target, 'yellow')    
    }
    else {
      this.renderer.removeClass($event.target, 'yellow');
       this.renderer.addClass($event.target, 'green');
    }
  }

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" (click)="flagActive('flag')" [ngClass]="items['flag'].flagStatus ? 'flagActive' : 'flagNotActive'">test1</i>

    <i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'">test2</i>

    <i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'">test3</i>

</div>

items = {
            "flag" : {flagStatus:false}, 
            "bookmark" : {flagStatus:false},
            "alarmClock" : {flagStatus:false}
   } ;

  constructor() { }

  flagActive(item){
    console.log(this.items[item]) ;
    this.items[item].flagStatus = !this.items[item].flagStatus
  }