使用Hostlistner和指令添加CSS类

Question

我已经创建了一个指令，并使用HostListner，希望在上添加CSS样式，在

tag.Also删除在上再次单击，我有以下CSS。

     CSS
    .strikethrough { text-decoration: line-through;}

     HTML
     <p optionalIngredient>ABCD</p>
     
      Directive 
     constructor(private elRef: ElementRef ,private renderer: Renderer2)  
       {  }

     @HostListener('mouseenter') onMouseEnter() {    
     this.renderer.addClass(this.elRef.nativeElement, 'strikethrough');
       }

    @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeClass(this.elRef.nativeElement,strikethrough');
      }

Answer 1

可以使用布尔值来跟踪是否应用了样式。

styled = false;

@HostListener('click') 
onClick(){
  if (!styled) this.renderer.addClass(this.elRef.nativeElement, 'strikethrough');
  else this.renderer.removeClass(this.elRef.nativeElement, 'strikethrough');
  this.styled = !this.styled;
}