Question

如何添加|删除角元素中的css类？

通过以下方式访问角度元素：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');

}

使用渲染器
在Native元素上使用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事件添加和删除类主机绑定，例如：在变量的帮助下，我将一个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版本`

如何添加|删除角元素中的css类？

3 个答案: