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

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

===============>>#1 票数:3 已采纳

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

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

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

===============>>#2 票数:2

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

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

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

===============>>#3 票数:0

使用(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版本`

  ask by Sergii translate from so

未解决问题?本站智能推荐: