Angular 中带有 hostlistener 的活动类

【问题标题】：Active class in Angular with hostlistenerAngular 中带有 hostlistener 的活动类
【发布时间】：2021-08-16 21:26:04
【问题描述】：

如何删除 li 标签上的活动类？我有一个代码在 li 标签上添加了一个活动类，但我无法删除这个活动类

   @Directive({
  selector: '[appHome]'
  
})
export class HomeDirective{
  ref!: ElementRef;

  @HostBinding('class.active')isActive=false;



  @HostListener('click')onClick(){
    
    if(!this.isActive){
      this.isActive=true;
      return;
    }
    
    }

            <p appHome> {{wd.titleName}}</p>
            <!-- <span class="line-performance"></span> -->
        </li>



    </ul>

【问题讨论】：

标签： javascript angular typescript sass

【解决方案1】：

我认为您正在寻找的是切换行为。如果是这样，请替换以下内容

if(!this.isActive){
  this.isActive=true;
  return;
}

与

this.isActive = !this.isActive;

如果您想有条件地添加活动类，您可以在列表项上使用ngClass，如下所示

<li [ngClass]="{'active' : isActive == true}">List Item</li>

【讨论】：

如果我写了这段代码，它将作为一个切换我想删除以前的活动类