时间戳

首页 > 解决方案 > Angular2：如何在类似元素上切换类

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

问题描述

我希望能够在单击时切换颜色。现在，当我单击一个时，它会将它们全部切换。我想单独切换每一个。

HTML：

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

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

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


</div>

JS：

import { Component } from '@angular/core';


@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {
  closeResult: string;
  flagStatus: boolean;
  constructor(private modalService: NgbModal) { }



  flagActive(){
    this.flagStatus = !this.flagStatus;

    }



}

标签： javascriptangular

解决方案

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

我无法说出您的问题的优化解决方案是什么，但这就是目前令我印象深刻的。

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

<!-- 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');
    }
  }

我Rendere2用来添加/删除类.. https://stackblitz.com/edit/angular-zdbsbp?file=src%2Fapp%2Ftoggle-color.directive.ts

推荐阅读