如何动态添加CSS类到某个元素？

Question

假设我有一个对象列表，并且想要更改某种对象样式。我正在利用ngClass和click事件来切换CSS类。

<ul class="container">
  <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible">1</li>
  <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">2</li>
  <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">3</li>
  <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">4</li>
</ul>

然后在组件中我有

export class MyComponent {
  isClassVisible: false;
}

和CSS

.active {
  background: black;
}

但是，使用这种方法时，当我单击列表中的元素时，CSS类将应用于所有元素，而不是单击的元素。

Answer 1

为什么不制定指令来处理它

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
@Directive({ selector: '[myActive]' })
export class ActiveDirective {

    private _isActive = false;

    constructor(private el: ElementRef, private renderer: Renderer) {

    }

    @HostListener('click', ['$event'])
    onClick(e) {
        e.preventDefault();
        this._isActive = !this._isActive;
        this.renderer.setElementClass(this.el.nativeElement, 'active', this._isActive);
    }
}

然后像这样使用

<ul class="container">
  <li class="item" myActive>1</li>
  <li class="item" myActive>2</li>
</ul>