如何动态地将css类添加到某个元素？答案

【问题标题】：How to dynamically add css class to a certain element?如何动态地将css类添加到某个元素？
【发布时间】：2017-02-24 06:35:36
【问题描述】：

假设我有一个对象列表，并且我想更改某个对象样式。我正在利用 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 类将应用于所有元素，但不会应用于我单击的元素。

【问题讨论】：

标签： angular

【解决方案1】：

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

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

    private _isActive = false;

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

    }

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

那就这样用吧

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

Renderer 类自 Angular 版本 4 以来已被标记为已弃用，自 Angular 版本 9 以来已完全删除。您也可以在较低的 Angular 版本中使用 Renderer2。 - ref
Renderer2 Docs

【讨论】：

谢谢你，伙计。如果我猜对了，通常指令用于向 DOM 元素添加行为，而组件需要它们自己的模板。
更简洁的方式来做同样的事情，+1

【解决方案2】：

因为您在所有 li's 中使用相同的变量，并且当您单击其中一个时，样式将应用于所有变量。

尝试在每个 li 上使用 diff diff 变量

或者这样使用

<ul class="container">
  <li *ngFor = 'let n of num' class="item" [ngClass]="{'active': selectedLi == n }" (click)="selectedLi = n">{{n}}</li>
</ul>

export class MyComponent {
  isClassVisible: false;
  num = [1,2,3,4,5]
}

【讨论】：

但是如果我有数百个元素呢？为每个变量使用不同的变量会很乏味。没有更简洁的解决方案吗？
是的，请查看我对该案例的更新答案

【解决方案3】：

您可以通过简单地实现一个单独的指令来实现这一点。要处理此单击事件，请使用 @HostListener 并绑定属性使用 @HostBinding 为：

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

@Directive({
  selector : '[appActive]'
})
export class ActivelinkDirective{
  @HostBinding('class.active') isActive=false;

  @HostListener('click') toActive(){
    this.isActive = !this.isActive;
  }
}

然后对于视图使用这个指令：

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

【讨论】：