如何添加 删除角度元素的CSS类？

Question

如何添加 删除角度元素的CSS类？

可通过以下this.elementRef.nativeElement访问角度元素： this.elementRef.nativeElement （ import { ElementRef } from '@angular/core'; ）。 CSS类名称为myclass 。

Answer 1

constructor(public elementRef: ElementRef, private renderer: Renderer)
{
        this.renderer.setElementClass(this.elementRef, 'class');
   // or 

            this.elementRef.nativeElement.classList.add('class');

}

1. 使用渲染器
2. 在本机元素上使用addClass

Answer 2

您可以使用HostBinding来执行此操作，而无需使用Renderer或ElementRef。 看这个例子：

import {Component, HostBinding} from "@angular/core";

@Component({
   ...
})
export class myComponent {
    @HostBinding('class.myclass') visible: boolean = false;  // True when visible
}

Answer 3

使用（ElementRef，Renderer）或使用Hostbinding有两种方法来做一个。下例演示了基于click事件Hostbinding添加和删除类，例如：在变量的帮助下，我附加了一个open（而不是open）您甚至可以将您的类名）类添加到HTML元素中。

import { Directive, ElementRef, HostListener, HostBinding } from '@angular/core';
@Directive({
  selector: "[appDropDown]",
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;
  constructor(private elRef: ElementRef) {

  }

  @HostListener('click') click(eventData: Event) {
    this.isOpen = !this.isOpen
  }
}

---

ElementRef例如：下面的示例用于使用渲染器时的Add方法

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


@Directive({
  selector: "[appDropDown]",
})
export class DropdownDirective {

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

  }

  @HostListener('click') click(eventData: Event) {
    this.renderer.setAttribute(this.elRef.nativeElement, 'class', 'open');
  }
}

如果您不使用渲染器，那么对于直接的本机元素，您可以使用this.elementRef.nativeElement.classList.add（'class'）

注意：尽管Renderer2适用于angula6版本`