jquery - Angular2 使用 ngClass 更改单个元素的 css 样式

Question

我在一个 div 中有三个按钮(每个都有不同的颜色)，opacity: 0.1。当我单击其中一个时，我会将其不透明度更改为 1，这是我的问题。我如何检查元素是否具有特定类？我在考虑使用 ngClass。

Answer 1

更好的方法是创建一个非常简单的自定义指令:

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

@Directive({
  selector: '[appOpacity]'
})
export class OpacityDirective {
  @HostBinding('class.opacity-1') isClicked = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

它会在点击时切换 opacity-1 类。然后将此指令附加到您的元素上:

<div>
  <button #appOpacity> Click here</button>
</div>